using getElementById to change background of multiple DIV id's

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 imag开发者_如何学编程e 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 :)) ]

Wrap all your divs in an outer div with an id like so:

<div id="section-menu-container">
    <div id="section-menu-1" onclick="this.className='className2';">Question 1</div>
    <div id="section-menu-2" onclick="this.className='className2';">Question 2</div>
    <div id="section-menu-3" onclick="this.className='className2';">Question 3</div>
</div>

Then using your javascript function:

function changeClass()
{
 var elems = document.getElementById("section-menu-container").getElementByTagName('div');
 elems.setAttribute('class', 'className1');
 elems.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}

Take a look at this demo: fiddle

This should put you in the right direction.

Basically, you need some kind of generic selector and as Paul above suggests, jquery is a great tool. Then you can add a class to your questions, say "myclass". Then, with jquery you do:

$('.myclass').attr("class", "className1");

Alternatively, you can do it with straight up javascript: document.getElementsByClassName('myclass') will return an array of DOM objects and you need to iterate over each element. However, getElementsByClassName may not be supported in IE versions before IE6 SP1.

How to implement a simple cross browser getElementsByClassName function

function initializeGetElementsByClassName ()
{
  if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
      var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
      var allElements = document.getElementsByTagName("*");
      var results = [];
      var element;
      for (var i = 0; (element = allElements[i]) != null; i++) {
        var elementClass = element.className;
        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
          results.push(element);
        }
        return results;
      }
    }
};

var currentWindowOnLoad = window.onload;

window.onload = function () {
    if (currentWindowOnLoad) {
        currentWindowOnLoad();
    }
    initializeGetElementsByClassName();
};

Now using this you can simply do the following:

HTML

<div class="sectionMenu" id="id="section-menu-1" ></div>
<div class="sectionMenu" id="id="section-menu-2" ></div>
<div class="sectionMenu" id="id="section-menu-3" ></div>

Script

var sectionMenus = document.getElementsByClassName("sectionMenu");
for (var i = 0; i < sectionMenus.length; i++) {
  var currentClass = !sectionMenu[i].getAttribute("class") ? sectionMenu[i].getAttribute("classname") : sectionMenu[i].getAttribute("class");
  sectionMenu[i].setAttribute("class", currentclass + " classname1");
  sectionMenu[i].setAttribute("classname", currentclass + " classname1");
}