forEach is not function

Question

Can someone explain to me how I can use forEach without an error message? I'm programming since 1 month so maybe it's a simple mistake.

------------------------------------------------------------------------------

let galleryImages1 = document.querySelector(".gallery-img");
let getLatestOpenedImg;
let windowWidth1 = window.innerWidth;



if (galleryImages1) {
    galleryImages1.forEach(function (image) {
        image.onclick = function () {

        }
    });
};

https://stackoverflow.com/questions/35969974/foreach-is-not-a-function-error-with-javascript-array have a look at this. — Manit, Apr 23 '20 at 17:15
well querySelector does not return a collection so there is nothing to loop over — epascarello, Apr 23 '20 at 17:20

score 1 · Answer 1 · answered Apr 23 '20 at 17:14

1

The selector querySelector returns only the first element. If you want to return all the elements which match your query use:

let galleryImages1 = document.querySelectorAll(".gallery-img");

answered Apr 23 '20 at 17:14

vtolentino

754
5
14

You cannot use foreach on a nodelist – Dave Keane Apr 23 '20 at 17:22
Check this fiddle: https://jsfiddle.net/votolentino/9orhcq4p/1/ – vtolentino Apr 23 '20 at 17:23
It won't in every javascript engine, there are polyfils for latest browsers to use a for loop when foreach is called – Dave Keane Apr 23 '20 at 17:37
Its not valid in typescript either – Dave Keane Apr 23 '20 at 17:38
`[...document.querySelectorAll(".gallery-img")]` will generate an array and `foreach` can be used. – Gerard Apr 23 '20 at 17:41
Its not backward compatible though, that's why typescript will force you to use a loop – Dave Keane Apr 23 '20 at 17:44

score 0 · Answer 2 · answered Apr 23 '20 at 17:15

0

Simply change

document.querySelector(".gallery-img");

to

document.querySelectorAll(".gallery-img");

as document.querySelector return a single element and you can not use forEach on single element.

answered Apr 23 '20 at 17:15

Zuckerberg

1,781
2
10
19

Federico Moretti · Answer 3 · 2020-04-23T17:28:45.207

0

Try this:

let galleryImages1 = document.getElementsByClassName("gallery-img");

if (galleryImages1) {
  galleryImages1.forEach(image => {
    image.onclick = () => {
      […]
    }
  });
}

Of course, I would use an eventListener to handle an onclick event, but I tried to follow your path.

edited Apr 23 '20 at 17:28

answered Apr 23 '20 at 17:19

Federico Moretti

527
1
11
22

Dave Keane · Answer 4 · 2020-04-23T17:49:05.937

Two problems

1 - The return type of document.querySelectorAll is NodeList and not Array which means it does not implement forEach method. Thus you need to use a for loop. A nodelist is not an array and you cannot use forEach

Modern browsers use a polyfill to use a for loop under the hood But its not doesn't work in all javascript Engines

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill

Typescript will throw an error too if you try and use foreach and will force you to use a for loop

2 - And use document.querySelectorAll and not document.querySelector to get a nodelist

forEach is not function

4 Answers4

Linked