Question

50

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

rated 0 times [ 56] [ 6] / answers: 1 / hits: 101823 / 10 Years ago, tue, june 17, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarrettw

Add To Favorites

Follow

Total Points: 300

Total Questions: 98

Total Answers: 103

Location: Saudi Arabia

Member since Mon, Sep 5, 2022

2 Years ago

jarrettw questions

1 How can I use Axios interceptors to add some headers to responses?

Mon, Aug 9, 21, 00:00, 3 Years ago

1 React: How to submit a form with < textarea> with enter key and without a submit button with React Hooks?

Thu, Feb 11, 21, 00:00, 3 Years ago

1 HTML2Canvas: Unable to find element in cloned iframe

Mon, Nov 11, 19, 00:00, 5 Years ago

1 Where to mount and unmount inside an Enzyme describe function?

Mon, Jun 3, 19, 00:00, 5 Years ago

1 Download a file through ajax request in asp.net MVC

Wed, Feb 27, 19, 00:00, 5 Years ago

View All

answered 10 Years ago cameron · Accepted Answer

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=>{