Не работает addEventListener?

Question

[shynga]

Добрый день.
Есть несколько блоков 'question'.
Нужно чтобы при клике на любой из элементов вызывалась функция, но при использовании данного ничего не работает.

const question = document.querySelectorAll('.question');

question.addEventListener('click', function() {
    alert('123');
});

Comments

[edward_freedom]

пройдись циклом по всем элементам, которые тебе вернула функция querySelectorAll и подпишись на событие

Answer 1

[Ярослав Иванов]

const questions = document.querySelectorAll('.question');

questions.forEach(question => {
    question.addEventListener('click', function() {
        alert('123');
    }
});

Потому что questions возвращает коллекцию элементов в виде массива а не один.

Answer 2

[G F]

У тебя массив там используй forEach или делегирование

Answer 3

[Алексей Ярков]

const questions = document.querySelectorAll('.question');

Array.from(questions).forEach(questionBlock => {
    questionBlock.addEventListener('click', function() {
        alert('123');
    });
});

Answer 4

[Денис Инешин]

Частая ошибка при переходе с jQuery на обычный JS.

$('.question').on('click', ()=>{}) // сработает всегда (будь там один элемент или несколько). Это происходит по тому что функция $ абстрагирует от вас эту логику.

В JS же нужно всегда понимать что именно возвращают вам методы поиска по дом-дереву:

document.querySelector() // вернет один элемент
document.querySelectorAll() // вернет коллекцию элементов похожую на массив
document.getElementById() // один элемент
document.getElementsByClassName() // коллекция элементов
// и т.д.

Обращайте внимание на написание: getElement(s). Элемент/элементЫ.

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

---

Есть альтернативное решение - делегирование событий. Гугл все подскажет.