forEach callback does not execute with getElementsByClassName

Question

In the below code,

<!DOCTYPE html>
<html>
    <head>
        <title>Hide odd rows</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div style="background-color:#8F9779;width:200px;height:30px;">
        </div>
        <hr style="width:200px" align="left">
        <table border="1" >
            <tr class="hide" >
                <td width="40" height="20">row 1</td>
            </tr>
            <tr>
                <td width="40" height="20">row 2</td>
            </tr>
            <tr class="hide">
                <td width="40" height="20">row 3</td>
            </tr>
            <tr>
                <td width="40" height="20">row 4</td>
            </tr>
            <tr class="hide">
                <td width="40" height="20">row 5</td>
            </tr>
        </table><br>
        <button type="button" name="HideRows">Hide Odd Rows</button>
        <script type="text/javascript" src="hideOddRows.js"></script>
    </body>
</html>

/* hideOddRows.js */
document.querySelector('[name=HideRows]').onclick = hideRows;

function hideRows(){
    var elements = document.getElementsByClassName('hide');
    elements.forEach(function(element){
        element.style.visibility = "hidden";
    });
    return true;
}

As per debugging, callback function for each element of elements array is not executing on click event.

I consider elements as keyed collection, as shown below..

--

How to resolve this error?

elements has nodelist and forEach does not work with nodelist. Try [].forEach.call(elements,function(item){}); — Rayon
– Rayon, Commented Dec 16, 2015 at 4:11

Alexander O'Mara · Accepted Answer · 2015-12-16 04:29:45Z

9

forEach is not included in the prototype of the array-like HTMLCollection object returned by getElementsByClassName.

An HTMLCollection instance is array-like, in that you can access elements by indexes, but it does not include all of the methods of an array, as you have discovered with forEach.

You can however manually call the method on the object by accessing the method from the Array prototype.

var elements = document.getElementsByClassName('hide');
Array.prototype.forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

edited Dec 16, 2015 at 4:29

answered Dec 16, 2015 at 4:12

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

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

2 Comments

overexchange Over a year ago

What is the story about return true? You didn't use it. Is it a must to say return true in callback and event handlers? Can't I say return 1 or return 23?

Alexander O'Mara Over a year ago

@overexchange In your case, it means allow the default behavior. I excluded it from my sample, as it's not directly related to the forEach issue. See this answer for more info: stackoverflow.com/a/128966/3155639

Josh Crozier · Accepted Answer · 2015-12-16 04:12:36Z

2

The forEach method is for arrays. It's not working because .getElementsByClassName() returns an HTMLCollection.

To work around this, use:

var elements = document.getElementsByClassName('hide');
Array.prototype.forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

or shorter:

var elements = document.getElementsByClassName('hide');
[].forEach.call(elements, function(element){
    element.style.visibility = "hidden";
});

answered Dec 16, 2015 at 4:12

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

1 Comment

Alexander O'Mara Over a year ago

I would recommend avoiding the shorter alternative, as it makes an unused array instance.

Ramanlfc · Accepted Answer · 2015-12-16 04:16:33Z

1

you can convert elements to an array and then call forEach().

 var elements = document.getElementsByClassName('hide');
 elements = Array.prototype.slice.call(elements,0);
    elements.forEach(function(element){
        element.style.visibility = "hidden";
    });

fiddle :https://jsfiddle.net/assx7hmh/

answered Dec 16, 2015 at 4:16

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

Comments

omgpwned · Accepted Answer · 2015-12-16 04:41:16Z

0

Base on your code, here is my solution:

function hideRows(){
  var elements = document.getElementsByClassName('hide');
  for(var key in elements) {
    if(elements.hasOwnProperty(key))
      elements[key].style.visibility = "hidden";
  }
  return true;
}

You just need to loop through object because forEach just accept array.

edited Dec 16, 2015 at 4:41

answered Dec 16, 2015 at 4:38

omgpwned

1478 bronze badges

2 Comments

Oriol Over a year ago

See Why is using “for…in” with array iteration such a bad idea?

overexchange Over a year ago

But using for..in adds an extra check of enumerability.

Collectives™ on Stack Overflow

forEach callback does not execute with getElementsByClassName

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related