Question

I have a page with two divs in it, one inside the other like so:

<div id='one'> 
<div id='two'></div>
</div>

I want div one to change class when it is clicked on, then change back when div two is selected.

I’m completely new to javascript, but I’ve managed to find a simple command that makes div one change when I click it.

<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>

Now I just need an equally simple way to change div one back when number two is clicked.

I’ve tried changing “this.className” to “one.classname,” and for some reason that worked when I was working with images, but it doesn’t work at all with divs

<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>

Essentially I’m wondering if there is a substitute for the javascript “this” that I can use to target other elements.

I’ve found several scripts that will perform the action I’m looking for, but I don’t want to have to use a huge, long, complicated script if there is another simple one like the first I found.

Answer 1

You can use document.getElementById

<div id='two' onclick="document.getElementById('one').className='a'; return false;"> 
 This does not work. 
</div>