CODEWITHSUNDEEP
javascriptforeach
Jer
Jer

Reputation: 5658

Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”

In my JSFiddle, I’m simply trying to iterate over an array of elements. The array is non-empty, as the log statements prove. Yet the call to forEach gives me the (not so helpful) “Uncaught TypeError: undefined is not a function” error.

I must be doing something stupid; what am I doing wrong?

My code:

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});
.myClass {
  background-color: #FF0000;
}
<div class="myClass">Hello</div>

Upvotes: 104

Views: 103605

Answers (3)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382464

That's because document.getElementsByClassName returns a HTMLCollection, not an array.

Fortunately it's an "array-like" object (which explains why it's logged as if it was an object and why you can iterate with a standard for loop), so you can do this :

[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {})

With ES6 (on modern browsers or with Babel), you may also use Array.from which builds arrays from array-like objects:

Array.from(document.getElementsByClassName('myClass')).forEach( v=> {})

or spread the array-like object into an array:

[...document.getElementsByClassName('myClass')].forEach( v=> {})

Upvotes: 182

Michael Nelles
Michael Nelles

Reputation: 6032

in the event that you want to access the ID of each element of a specific class you can do the following:

    Array.from(document.getElementsByClassName('myClass')).forEach(function(element) {
        console.log(element.id);
    });

Upvotes: 0

Vaibhav Jain
Vaibhav Jain

Reputation: 727

Try this it should work : 

<html>
  <head>
    <style type="text/css">
    </style>
  </head>
  <body>
   <div class="myClass">Hello</div>
   <div class="myClass">Hello</div>

<script type="text/javascript">
    var arr = document.getElementsByClassName('myClass');
    console.log(arr);
    console.log(arr[0]);
    arr = [].slice.call(arr); //I have converted the HTML Collection an array
    arr.forEach(function(v,i,a) {
        console.log(v);
    });
</script>


<style type="text/css">
    .myClass {
    background-color: #FF0000;
}
</style>

  </body>
</html>

Upvotes: 11

Related Questions