Почему возникает ошибка в консоле при использовании querySelectorAll?

Question

[Дмитрий Акулич]

Есть две страницы сайта. На каждой странице есть элементы, при клике на которые должны происходить одинаковое событие (открытие попап окна). Но на первой странице элемен один, а на второй три элемента. Всем элементам присвоен общий класс для удобства.

Если я в js использую метод querySelector то, соответственно, выбирается первый подходящий элемент. И тогда на первой странице срабатывает событие и на второй, но только на первом элементе.

Логично использовать метод querySelectorAll. Но при его использовании сразу же на появляется ошибка в консоле и событие не срабатывает ни на какой странице. Ошибка - "Uncaught TypeError: openPopap.addEventListener is not a function"

Понимаю, что надо использовать цикл для второй страницы, но до этого еще не дошел т.к. не могу решить пока эту проблему.

var openPopap = document.querySelectorAll('.open-popap');

openPopap.addEventListener('click', function(openForm) {
  openForm.preventDefault();
  formSection.classList.toggle('modal-form--open');
});

Answer 1

[gleendo]

openPopap --> Array --> [Node, Node, Node, ...]

openPopap.forEach(item => {
  item.addEventListener("click", event => {
    event.preventDefault();

    formSection.classList.toggle("modal-form--open");
  });
});

Почему возникает ошибка в консоле при использовании querySelectorAll?

Понимаю, что надо использовать цикл для второй страницы, но до этого еще не дошел т.к. не могу решить пока эту проблему.

Comments

[Дмитрий Акулич]

Наверное с высоты Повелителя всё выглядит простым и банальным (ирония).

Я довольно посредственно разбираюсь в js, поэтому не совсем понял что значит penPopap --> Array --> [Node, Node, Node, ...] ???

[gleendo]

Дмитрий Акулич, это вообще не код. Это значит что при использовании querySelectorAll(); возвращается массив из элементов класса Node, следовательно для того чтобы повесить на каждый узел обработчик события, в данном случае click, необходимо перебрать весь массив в цикле, что собственно вы и написали. В общем то не понимаю в чем у вас проблема, вы задали вопрос и сами же на него ответили

[Дмитрий Акулич]

Спасибо за ответ и участие.

Так собственно проблема для меня в том, что я логики метода не понимал, и что надо обязательно использовать цикл!

Я думал что querySelectorAll(); должен и без цикла находить первые подходящие элементы, по аналогии с querySelector.

А вообще решил задачу так:

[].forEach.call(openPopap, function(popap) {
  popap.addEventListener('click', function(openForm) {
    openForm.preventDefault();
    formSection.classList.toggle('modal-form--open');
  });
});

Не знаю на сколько это правильно, но работает. Может кому понадобиться.

[gleendo]

Дмитрий Акулич, Вообще это тоже самое что и я написал. Но в вашем решение есть один небольшой минус. В данном случае, использование такой конструкции [].forEach.call, будет создавать объект массива, который вообще никому не нужен, следовательно просто так будет занимать память и процессорное время на создание. Конечно в данном случае это вообще почти не важно, но все таки, правильнее будет заимствовать метод у прототипа класса. В данном случае следовало бы написать

Array.prototype.forEach.call();
// В данном случае просто вызывается метод в другом контексте и не создается никакого лишнего объекта.

. Но на данный момент у NodeList (коллекция узлов возвращаемая методом querySelectorAll()) есть собственный метод forEach(), следовательно его можно просто вызывать у коллекции, ни у кого не заимствуя его. Тут главное понять что конкретно метод возвращает...Далее будет понятно как работать с данными

[Дмитрий Акулич]

Спасибо за разъяснение таких деталей. Это действительно важно понимать и осознанно применять.