@shynga

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

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

question.addEventListener('click', function() {
    alert('123');
});
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
space2pacman
@space2pacman
Просто царь.
const questions = document.querySelectorAll('.question');

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


Потому что questions возвращает коллекцию элементов в виде массива а не один.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
fomenkogregory
@fomenkogregory
Юниор софтварный инженер
У тебя массив там используй forEach или делегирование
Ответ написан
yarkov
@yarkov Куратор тега JavaScript
https://github.com/yarkovaleksei/toster-extension
const questions = document.querySelectorAll('.question');

Array.from(questions).forEach(questionBlock => {
    questionBlock.addEventListener('click', function() {
        alert('123');
    });
});
Ответ написан
IonDen
@IonDen Куратор тега JavaScript
JavaScript developer. IonDen.com
Частая ошибка при переходе с jQuery на обычный JS.

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


В JS же нужно всегда понимать что именно возвращают вам методы поиска по дом-дереву:
document.querySelector() // вернет один элемент
document.querySelectorAll() // вернет коллекцию элементов похожую на массив
document.getElementById() // один элемент
document.getElementsByClassName() // коллекция элементов
// и т.д.


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

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

---

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы