Javascript: getElementsByClassName not giving all elements

Question

Well i put tablerows with a classname "gone" in my Html like this:

 <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>
    <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>
    <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>
    <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>
    <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>
    <tr class="gone">
        <th>text</th>
        <td>text</td>
    </tr>

and when i get my elements in javascript with this code:

var arrayelements=document.getElementsByClassName('gone');
var arrlength=arrayelements.length;
for(var i=0;i<arrlength;i++){
    arrayelements[i].setAttribute("class","there");
    console.log(arrayelements);
}

the return value of my console.log is

> <tr class="there">...</tr> 
> <tr class="there">...</tr>
> <tr class="there">...</tr>
> undefined

the next time i run it the result is

> <tr class="there">...</tr> 
> <tr class="there">...</tr>
> undefined

i don't understand why it is suddenly undefined

Man, `undefined` is okay, coz whatever you are doing doesn't return anything. So it is so. But, let me try to repro. — Praveen Kumar Purushothaman, Dec 01 '16 at 12:25
Shouldn't console.log be outside the loop? Or do you mean to log arrayelements[i] within the loop? Or your goal really is to see it all step by step? — Jeremy Kahan, Dec 01 '16 at 12:35

Jaromanda X · Accepted Answer · 2016-12-01T12:33:47.767

the HTMLCollection returned by getElementsByClassName is a LIVE LIST ... by changing the class, you change the list during the for loop!

One solution is to "copy" the list to an array

var arrayelements=Array.prototype.slice.call(document.getElementsByClassName('gone'));
var arrlength=arrayelements.length;
for(var i=0;i<arrlength;i++){
    arrayelements[i].setAttribute("class","there");
    console.log(arrayelements);
}

Another method would be to start at the end of the list and work backwards

var arrayelements=document.getElementsByClassName('gone');
var arrlength=arrayelements.length;
for(var i=arrayelements.length-1;i>=0;i--){
    arrayelements[i].setAttribute("class","there");
    console.log(arrayelements);
}

or another - always work on the first element, seeing as you're always shrinking the length

var arrayelements=document.getElementsByClassName('gone');
while(arrayelements.length) {
    arrayelements[0].setAttribute("class","there");
}

I would recommend the first as the easiest to work with, and avoid the last method :p

thanks it works, they didn't say that on school so i was really confused — Beysinvader, Dec 01 '16 at 12:40

Javascript: getElementsByClassName not giving all elements

1 Answers1

Linked