getElementsByClassName to change the style of elements when event occurs [duplicate]

Question

This question already has an answer here:

• What do querySelectorAll and getElementsBy* methods return? 9 answers

I'm trying to use

 onmouseover="document.getElementsByClassName().style.background='color'"

to change the color of all divs with a given classname to another color when hovering over another page element.

Here is a jsfiddle -if anyone could give a few helpful pointers as to where I'm going wrong that would be great, I'm sure it's something really obvious that I'm missing. It worked with document.getElementById, but that only changed the color of the first div, not all of them.

Thanks :)

Answer 1

As the function name suggests getElementsByClassName returns a collection not just one object. So you need to loop through them and apply the color to it.

document.getElementsByClassName()
                   ^_______

Plus your id part is invalid. Id cannot have spaces and also it shouldn't appear again on the page which is violated by:

<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>

You can do it this way (You can look up what is a handler and try play yourself with it.), don't use inline attributes for handlers.

window.onload=function(){
    var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

Fiddle

If you are really trying to do it for some real work, then don't change the style attribute, instead define classes and add/remove classes on mouseover, mouseout events so that you get the power of css' cascading property.