forEach не является функцией

Question

Может кто-нибудь объяснить мне, как я могу использовать forEach без сообщения об ошибке? Я программирую с 1 месяца, так что, возможно, это простая ошибка.

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

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



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

        }
    });
};

Answer 1

Селектор querySelector возвращает только первый элемент. Если вы хотите вернуть все элементы, соответствующие вашему запросу, используйте:

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

Answer 2

Попробуйте:

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

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

Конечно, я бы использовал eventListener для обработки события onclick, но я пытался следовать вашему пути.

Answer 3

Две проблемы

1 - Возвращаемый тип document.querySelectorAll - NodeList, а не Array, что означает, что он не реализует метод forEach. Таким образом, вам нужно использовать для l oop. Список узлов не является массивом, и вы не можете использовать forEach

Современные браузеры используют полифилл для использования для l oop под капотом, но это не работает во всех javascript Двигатели

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

Typescript также выдаст ошибку, если вы попытаетесь использовать foreach, и заставит вас использовать для l oop

2 - И используйте document.querySelectorAll, а не document.querySelector для получения списка узлов

Answer 4

Просто измените

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

на

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

, так как document.querySelector возвращает один элемент, и вы не можете использовать forEach для одного элемента.