Cannot read properties of null (reading 'addEventListener')

Question

Создаю динамические блоки внутри которых есть кнопка, при которой нужно чтоб блок удалялся, с толкнулся с такой проблемой. Событие не вещается из за того что еще не создан блок, как можно решить данную проблему?

btnAddNotes.addEventListener('click', () =>{
    let bodyNotes = document.querySelector('.notes__body')
    let newDiv = document.createElement("div");
    let inputTitle = document.querySelector('.modal__title').value
    let inputText = document.querySelector('.modal__text').value
    newDiv.innerHTML = `
    <div class="notes__content">
        <div id="notes" class="remove__notes">&times</div>
        <h1>${inputTitle}</h1>
        <span>${inputText}</span>
    </div>`;
    bodyNotes.insertAdjacentElement('beforeend', newDiv);
    closeModal()
})

Ниже код который вызывает ошибку

Класс remove__notes появляется когда создается блок, потому что это кнопка внутри созданного блока
btnRemoveNotes = document.querySelector('.remove__notes')
btnRemoveNotes.addEventListener('click', () =>{
    console.log('Win')
}

Answer 1

Вам надо создавать обработчик нажатия кнопки вместе с созданием самого блока.

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

const btnAddNotes = document.getElementById('btn');
btnAddNotes.addEventListener('click', () =>{
    let bodyNotes = document.querySelector('.notes__body')
    let newDiv = document.createElement("div");
    let inputTitle = document.querySelector('.modal__title').value
    let inputText = document.querySelector('.modal__text').value
    // Создаем кнопку
    const rmBtn = document.createElement("div");
    rmBtn.innerHTML = `&times`;
    rmBtn.classList = 'remove__notes'
    rmBtn.addEventListener('click', () => { // И обработчик
      newDiv.remove();
    });
    // Контейнер с данными
    const conteiner = document.createElement("div");
    conteiner.classList.add('notes__content');
    //Заголовок
    const h = document.createElement('h1');
    h.innerText = inputTitle;
    // Текст
    const span = document.createElement('span');
    span.innerText = inputText;
    // Добавляем кнопку и текст в контейнер
    conteiner.append(rmBtn);
    conteiner.append(h);
    conteiner.append(span);
    // Вставляем в newDiv
    newDiv.append(conteiner);
    bodyNotes.insertAdjacentElement('beforeend', newDiv);
    //closeModal()
})

<div class='notes__body'></div>
title: <input class='modal__title'><br/>
text: <input class='modal__text'><br />
<button id='btn'>add</button>

БЛОГ НА HUSL

Cannot read properties of null (reading 'addEventListener')

Ответы (1 шт):