Getelementsbyclassname to Change the Style of Elements When Event Occurs

getElementsByClassName to change the style of elements when event occurs

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.

getElementsByClassName('container').style.display='block'; somehow doesn't work

That's because document.getElementsByClassName returns a list. So, you have to add an index there.

If that container class is on 1 element only then just write

document.getElementsByClassName('container')[0].style.display = block
//see the [0] after ('container')

If there are multiple elements having container class then you might want to loop through all of them with a for loop

Using addEventListener and getElementsByClassName to pass an element id

codepen demo

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) {
  (function(index) {
    userSelection[index].addEventListener("click", function() {
       console.log("Clicked index: " + index);
     })
  })(i);
}

As pointed out by @torazaburo in the comments, you can use the following if the browsers you want to support are complying with ECMAScript 6 (ES6), the newest version of JavaScript.

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i);
  })
}

Change multiple classes with getElementsByClassName?

Instead of document.getElementsByClassName use document.querySelectorAll and pass in the CSS selector (not just the classnames):

var berninis = document.querySelectorAll('.picasso, .matisse');
for(var i = 0; i < berninis.length; i++) {
  berninis[i].style.color="#d1d1d1";
}

---

Related Topics