How to use getElementsByClassName in javascript-function? [duplicate]

Question

I can't figure out how to use multiple IDs in JavaScript. No problem with single ID and getElementById, but as soon as I change IDs to class and try using getElementsByClassName the function stops working. I've read about a 100 post about the topic; still haven't found the answer, so I hope someone here knows how to make getElementsByClassName work.

Here's some simple code that I have used for testing:

function change(){
    document.getElementById('box_one').style.backgroundColor = "blue";
}

function change_boxes(){
    document.getElementsByClassName ('boxes').style.backgroundColor = "green";
}

   
<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />   

<div id="box_one"></div>
<div class="boxes" ></div>
<div class="boxes" ></div>

As the name suggests, the function returns a list of elements: developer.mozilla.org/en-US/docs/DOM/…. — Felix Kling
– Felix Kling, Commented Jan 3, 2013 at 16:13
possible duplicate of What is wrong with this getElementsByClassName call in Javascript? and Can getElementsByClassName change style? and a lot more, which can be found in the right hand column. — Felix Kling
– Felix Kling, Commented Jan 3, 2013 at 16:15
More duplicates: stackoverflow.com/q/3349332/218196, stackoverflow.com/q/12377734/218196, stackoverflow.com/q/13667533/218196. — Felix Kling
– Felix Kling, Commented Jan 3, 2013 at 16:19

Evan Davis · Accepted Answer · 2015-01-26 19:53:15Z

29

getElementsByClassName() returns a ~~nodeList~~ HTMLCollection*. You are trying to operate directly on the result; you need to iterate through the results.

function change_boxes() {
    var boxes = document.getElementsByClassName('boxes'),
        i = boxes.length;

    while(i--) {
        boxes[i].style.backgroundColor = "green";
    }
}

* updated to reflect change in interface

edited Jan 26, 2015 at 19:53

answered Jan 3, 2013 at 16:13

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jan199674 Over a year ago

Thx - working fine. Not sure i actually understand why - ill copy your solution into the larger project im working on and hopefully i can make it work there as well

Felix Kling Over a year ago

@Kenneth: getElementsByClassName returns all elements with that class name, i.e. multiple elements. To change properties of these elements you have to iterate over the list of elements.

jan199674 Over a year ago

Hmm - got another problem i cant figure out. I have 20 buttons on same page using same styling. Buttons are div-class and selected by onClick with the working code from Mathletics. Each button is actually made out of 2 buttons which changes position by z-index when clicked and presents a new picture for every button.

anonymous-one Over a year ago

perfect, just what we needed. something to keep in mind, if changing the className inside a loop that uses getElementsByClassName, you need to work backwards (like the example above, i--). thanks!

Maksim Vi. Over a year ago

It actually returns an instance of a HTMLCollection now instead of NodeList

Tharindu Lakshan · Accepted Answer · 2021-10-20 20:03:32Z

4

getElementsByClassName Returns a set of elements which have all the given class names

var elements = document.getElementsByClassName('boxes');
for(var i=0, l=elements.length; i<l; i++){
 elements[i].style.backgroundColor = "green";
}

edited Oct 20, 2021 at 20:03

Tharindu Lakshan

6,8128 gold badges32 silver badges51 bronze badges

answered Jan 3, 2013 at 16:16

Scipion

1,3801 gold badge10 silver badges17 bronze badges

Comments

JLRishe · Accepted Answer · 2013-01-03 16:17:33Z

-1

getElementsByClassName returns a list of elements so you would need to iterate through them and set the styles on each item one by one. It also has limited support in IE, so you might be better off using jQuery:

$(".boxes").css("backgroundColor", "green");

answered Jan 3, 2013 at 16:17

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Collectives™ on Stack Overflow

How to use getElementsByClassName in javascript-function? [duplicate]

3 Answers 3

5 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Linked

Related