How to use getElementsByClassName in javascript-function?

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: https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName. — Felix Kling, Jan 03 '13 at 16:13
possible duplicate of [What is wrong with this getElementsByClassName call in Javascript?](http://stackoverflow.com/questions/3391791/what-is-wrong-with-this-getelementsbyclassname-call-in-javascript) and [Can getElementsByClassName change style?](http://stackoverflow.com/questions/10693845/can-getelementsbyclassname-change-style) and a lot more, which can be found in the right hand column. — Felix Kling, Jan 03 '13 at 16:15
More duplicates: http://stackoverflow.com/q/3349332/218196, http://stackoverflow.com/q/12377734/218196, http://stackoverflow.com/q/13667533/218196. — Felix Kling, Jan 03 '13 at 16:19

Evan Davis · Accepted Answer · 2015-01-26T19:53:15.827

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 '15 at 19:53

answered Jan 03 '13 at 16:13

Evan Davis

35,493
6
50
57

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 – jan199674 Jan 03 '13 at 16:22
1

@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. – Felix Kling Jan 03 '13 at 16:24
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. – jan199674 Jan 03 '13 at 16:56
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! – anonymous-one Apr 23 '14 at 09:49
1

It actually returns an instance of a `HTMLCollection` now instead of `NodeList` – Maksim Vi. Jan 26 '15 at 19:22

score 4 · Answer 2 · edited Oct 20 '21 at 20:03

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 '21 at 20:03

Tharindu Lakshan

3,995
6
24
44

answered Jan 03 '13 at 16:16

Scipion

1,350
1
10
16

score -1 · Answer 3 · answered Jan 03 '13 at 16:17

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");

How to use getElementsByClassName in javascript-function?

3 Answers3

Linked

Related