Из-за чего может быть ошибка Cannot read property 'addEventListener' of null?

Question

[Влад ~]

const questionBlocks = document.querySelectorAll('.question > .body');

questionBlocks.forEach(item => {
        const btn = item.querySelector('.btn-next');
        console.log(btn);
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            console.log(e.target);
        })
    })

Answer 1

[Stalker_RED]

Ошибка из-за того, что querySelector не нашел элемент, а у null нет метода addEventListener.

Переделать можно так:

const questionsContainer = document.querySelector('.question'); // общий родитель
questionsContainer.addEventListener('click', myQuestionsClickHandler); // слушаем все клики

function myQuestionsClickHandler(evt) {
  const btnNext = evt.target.closest('.btn-next');
  if (btnNext) { // если клик по кнопке или внутри нее
    evt.preventDefault();
    console.log(btnNext);
  }
}

чтение по теме

Comments

[Влад ~]

Спасибо! Про делегирование я совсем забыл

Answer 2

[Дмитрий Беляев]

querySelector если ничего не нашел возвращает null

Comments

[Andrey Vasilev]

а прослушка внутри цилка - это нормально?

[Дмитрий Беляев]

Andrey Vasilev, навешивание листенеров - а много других вариантов? Ну кроме как слушать на родителе и отсеивать лишнее?
А вот функцию обработчик лучше вынести за цикл, чтоб не забивать память однотипными функциями

[Влад ~]

Дмитрий Беляев, получается задача такая
есть n-кол-во блоков с кнопками внутри нужно навестить на эти кнопки событие клика и делать проверку на пустые поля в родительском блоке(это я сделал)
единственный вариант который пришел на ум это брать все блоки прогонять их в форичем и на каждой итерации находить кнопку внутри и вешать на ее клик (скорее всего есть какой-то другой вариант, но практики с js покачто мало)

[Артем]

Этот код в функции document.onready?

[Влад ~]

Kp18,
import quize from './modules/quize';
document.addEventListener('DOMContentLoaded', () => {
quize();
});
немного переделал код и все работает

[Дмитрий Беляев]

Влад ~, почему бы сразу не найти все кнопки?

const questionBlocksButtons = document.querySelectorAll('.question > .body .btn-next');
const questionBlocksButtonClickListener = (e) => {
    e.preventDefault();
    console.log(e.target);
};
questionBlocksButtons.forEach(btn => {
    btn.addEventListener('click', questionBlocksButtonClickListener);
});