Почему не срабатывает querySelectorAll()?

Question

[Stanislav6]

Есть такая конструкция:

<main class="main-section">
  <nav class="main-nav">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  <nav>
</main>

пытаюсь выбрать все элементы внутри nav чтобы привязать на них событие по клику:

const sectionMain = document.querySelector('.main-section');
const navTrigger = sectionMain.querySelectorAll('.element');

navTrigger.addEventListener('click', () => {
       toggleMenu();
    });
function toggleMenu() {
       sectionMain.classList.toggle('active');
    }

...и ничего. Заменяю querySelectorAll на querySelector — на первый элемент срабатывает.

Comments

[Михаил Р.]

Что querySelectorAll возвращает? Бегом смотреть!

Answer 1

[Надим]

Это вам не jQuery) Надо в цикле перебрать все элементы массива и отдельно на каждый элемент навесить обработчик. Если хотите, чтобы по волшебству обработчик на все элементы сам приклеился, используйте jQuery.

Answer 2

[senator]

Это псевдо массив его надо перебирать

Answer 3

[apoca1ipsis]

navTrigger.forEach((item)=>{
        item.addEventListener('click', () => {
            toggleMenu();
        });
    })

Answer 4

[RimMirK]

я даже джаваскрипт толком не знаю!

const elements = document.querySelectorAll(".main-section .main-nav .element");

for (var element of elements) {
    element.addEventListener('click', function (e) {
        this.style.color = 'green';
    })
}

Answer 5

[Mikhail Osher]

Набросал на коленке, просто показать идею

const sectionMain = document.querySelector('.main-section');

sectionMain.addEventListener('click', (event) => {
  if (event.target.classList.contains('element')) {
    sectionMain.classList.toggle('active');
  }
});