All geek questions in one place

ForEach callback fails with getElementsByClassName

In the code below

<!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; }

According to debugging, the callback function for each element the elements array is not executed on the click event.

I consider elements as a collection with a key, as shown below.

enter image description here

-

How to resolve this error?

+5
source share
4 answers

forEach not included in the prototype of an object of type HTMLCollection , similar to the array returned by getElementsByClassName .

An HTMLCollection instance is similar to an array, since you can access elements by index, but it does not include all the methods of the array, as you found with forEach .

However, you can manually call the object's method by accessing the method from the Array prototype.

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

The forEach method is for arrays. It does not work because .getElementsByClassName() returns an HTMLCollection.

To get 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"; });
+2
source

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

script: https://jsfiddle.net/assx7hmh/

+1
source

The basics of 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 skip the object because forEach just accepts an array.

0
source

Source: https://habr.com/ru/post/1238335/

More articles:


All Articles