Как добавить класс сразу всем элементам?

Question

[aspirin37]

Нужно при клике на гамбургер добавить класс всем найденным элементам. Консоль возвращает cannot get property "toggle" of undefined. Если поменять в переменной mobile querySelectorAll на querySelector, то все вроде работает, но класс добавляется только первому найденному элементу. Не понимаю как сделать то же самое, но сразу всей группе. Заранее спасибо )

var toggle = document.querySelector(".main-nav__burger");
var mobile = document.querySelectorAll(".main-nav__item--mobile");

toggle.addEventListener("click", function(event) {
  event.preventDefault();
  mobile.classList.toggle("main-nav__item--opened");
});

Comments

[Дмитрий Локшин]

Нужно пройтись циклом по всем найденным элементам, чтобы добавить нужный класс каждому.

Answer 1

[alvvi]

document.querySelectorAll()
вовращает NodeList, то есть Array-like объект, у него нет свойства classList, оно есть только у объектов Element
Правильно будет так (ES6):

toggle.addEventListener("click", function(event) {
  event.preventDefault();
  mobile.forEach((el) => {
    el.classList.toggle("main-nav__item--opened");
  });
});

Работать будет только в современных браузерах, в остальных нужен полифил для NodeList.forEach
Чуть более кроссбразуерно:

toggle.addEventListener("click", function(event) {
  event.preventDefault();
  for(var i = 0; i < mobile.length; i++) {
    mobile[i].classList.toggle("main-nav__item--opened");
  }
});

Comments

[aspirin37]

Спасибо за развернутый ответ )