Как получить доступ к кнопке, которой изначально не было на странице?

Question

создаю todo list,у которого есть кнопка статуса. При нажатии этой кнопки высвечивается popup.Кнопки изначально нет на странице,она приходит вместе с задачей из инпута . Проблема в том,что для первой задачи кнопка работает и попап высвечивается,а если вбить последующие задачи ,то кнопка не работает,помогите пожалуйста разобраться в чем ошибка

    //создание задачи 
const inputField = document.querySelector('#inputField');
const clearButton = document.getElementById('clearButton');
const form = document.querySelector('#form');
const taskList = document.querySelector('#taskList');


inputField.addEventListener('input', function() {
  clearButton.style.display = this.value ? 'block' : 'none';
});

clearButton.addEventListener('click', function() {
  inputField.value = '';
  clearButton.style.display = 'none';
});


form.addEventListener('submit' ,(event) => {
event.preventDefault();

const taskText = inputField.value

const taskHTML = `<li class="TS">
                    <span>${taskText}</span>
                    <button data-action="start" id="btn-status">Открыто</button>
                </li>`

taskList.insertAdjacentHTML('beforeend',taskHTML);

inputField.value = "";
inputField.focus();

    //пробовал создать функцию,которая обращается к родителю 
taskList.addEventListener('click',popupTask)

function popupTask(event){
    if(event.target.dataset.action === "start"){
    const parentNode =  event.target.closest('.TS');
    parentNode.add()

    }
}
//popup
document.getElementById("btn-status").addEventListener("click",function(){
    document.getElementById("myModal").classList.add("open")
})

document.getElementById("close-myModal-btn").addEventListener("click",function(){
    document.getElementById("myModal").classList.remove("open")
})

Вот блок куда добавляется задача

  <div class="block-two">
                <div class="list-block">
                    <p id="p1"><b>Задачи</b></p>
                    <p id="p2"><b>Статус</b></p>
                </div>
                <div class="task-status">
                    <ul class="ts-list" id="taskList">
                            <!-- <li class="TS">
                                <span>Полить цветы</span>
                                <button data-action="start" id="btn-status">Открыто</button>
                            </li> -->
                    </ul>
                </div>
            </div>

Вот такая ошибка выскакивает ,если нажимаю на кнопку последующих задача(кроме первой,на первой popup высвечивается): TypeError: parentNode.add is not a function at HTMLUListElement.popupTask

Answer 1

Как получить доступ к кнопке, которой изначально не было на странице?

Один из вариантов решения - использование делегирования событий... Как некий макет такого подхода.

const ou = document.querySelector('ul')
document.querySelector('.add').addEventListener('click', _ => {
  const oi = document.querySelector('input')
  const o = temp.content.cloneNode(true)
  o.querySelector('span').textContent = oi.value
  oi.value = ''
  ou.append(o)
})
ou.addEventListener('click', e => {
  const o = e.target.closest('li')
  if (!o) return
  o.querySelector('button').classList.add('off')
})

.off {
  display: none;
}
li + li {
  margin-top: 5px;
}

<input />
<button class='add'>+</button>
<ul></ul>
<template id='temp'>
  <li>
    <span></span>
    <button>Открыто</button>
  </li>
</template>

Answer 2

Проблема в том, что для каждой новой задачи ты добавляешь кнопку в DOM, но обработчик события клика на кнопку устанавливается только для первой кнопки, потому что обработчик устанавливается на элемент с id btn-status до того, как задачи добавлены.

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const taskText = inputField.value;

  const taskHTML = `<li class="TS">
                      <span>${taskText}</span>
                      <button data-action="start" class="btn-status">Открыто</button>
                    </li>`;

  taskList.insertAdjacentHTML('beforeend', taskHTML);

  inputField.value = "";
  inputField.focus();
});

// Делегирование событий на родителя taskList
taskList.addEventListener('click', (event) => {
  if (event.target.classList.contains('btn-status')) {
    document.getElementById("myModal").classList.add("open");
  }
});

document.getElementById("close-myModal-btn").addEventListener("click", function(){
  document.getElementById("myModal").classList.remove("open");
});

Обработчик клика на кнопки btn-status теперь устанавливается через делегирование событий. Вместо того, чтобы навешивать обработчик на конкретную кнопку, обработчик теперь навешивается на родителя (taskList), который всегда есть в DOM.

БЛОГ НА HUSL

Как получить доступ к кнопке, которой изначально не было на странице?

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