onclick change content

[onestopplay]

So here's basically what I need to accomplish.

<a>click here 1</a>
<a>click here 2</a>
<div>content box</div>

When the user clicks "click here 1", the following div gets put into the content box.
<div>content1</div>

But when the user clicks "click here 2", I need it so that it puts this content into the box:
<div>content2</div>

How can I get this to happen?? I think it has something to do with functions and onclick='', etc.

THANKS!!

[djr33]

It's possible a few ways. This is similar to a rollover image in that you do an action (click/rollover) and the content of an element on the page changes.
Making this work smoothly for more than your situation might be difficult (but there are probably some scripts available). Just making this work on a single page (that is-- not making it a generally usable script) would be a little easier.
The problem is how different browsers work with modifying existing html code. For example, innerHTML is a property that works in some (but not all) browsers for the code of a div. More reliably you could try to use an iframe and change it's src dynamically (that is fairly easy), but that is not a good solution because iframes have their own problems and it is better to avoid them if possible.

I'm not sure on the specifics of the best solution here, but these are the general steps:
1. For any element to control this, it is very simple: onclick="Dosomething()".
2. Dosomething() should be defined in javascript (in the head section, etc.-- or you could just do it explicitly within onClick="...").
3. To access the content and change it, do this:
document.x.y.z.innerHTML = 'new html here';
(x.y.z refers to how you actually get that particular div on your page... it may vary by how your page is setup, but generally just by the name of the div and possibly frame it is in)


Here's a discussion of this:
http://bytes.com/topic/javascript/an...tml-within-div


But remember that javascript will never work in 100% of browsers, so you always need to have a backup method available. If this is the only way to view the content, then some visitors will not be able to see it.
One way around that is to have the links work this way (and you can generate the content of the div via php, etc), and just use javascript to change it and not reload the page if javascript works.