having spent hours on this problem i need to throw it out to the masses. I have a test page at http://sketch360test.co.uk/test.php on which I’m trying to use onclick events to serve two purposes at once… 1) to show/hide various results div (this is working), and 2) to change the background image(s) of the ‘question’ divs. All of the ‘question’ divs have a green background image by default (controlled by CSS), a black image on rollover… and I’m trying to get them to each have a black image onclick, as well as resetting the bg image for all the OTHER question divs to green when one is clicked. Hope that makes sense… it should be more obvious if you view the page!
I’ve managed to get this working for a single instance, ie… clicking either Question 1, Question 2 or Question 3 will turn them to a black bg. This has been done using an inline onclick function to call a css class, for example:
<div id="section-menu-1" onclick="this.className='className2';">Question 1</div>
I have then added some more javascript to the container for this element (Question 1), which manages to ‘reset’ or ‘revert’ the black bg of Question 3 to green. This has been done using the following script:
<script type="text/javascript">
function changeClass()
{
var e = document.getElementById("section-menu-3");
e.setAttribute('class', 'className1');
e.setAttribute('className', 'className1'); // for IE which does not recognize "class"
return;
}
</script>
Please note here that I have tried NUMEROUS scripts for changing the class of my DIVs, this is the only one that works consistently. Herein lies the problem though – I want to modify the above script to affect all of the Question ID’s, not just “section-menu-3”. Incidentally, there are only 3 Questions in this demo but I will have up to 7 or 8 on the final page and so need to modify the above script to be able to take numerous ID’s. I’ve tried things like getElementsByTag but haven’t been able to get them to work (perhaps because I’m trying to add a class to an element that I’ve already applied one to for that process).
Anything else I’ve tried has ended up breaking the functionality of the above mini-script.
Basically, HELP! [ please :)) ]
Take a look at this demo: fiddle
This should put you in the right direction.