主页 / user-619789

Максим's questions

Martin Hope
Максим
Asked: 2024-09-10 19:24:41 +0800 CST
  • 5

我正在创建一个带有状态按钮的待办事项列表。单击此按钮时，会显示一个弹出窗口，该按钮最初不在页面上，而是随输入的任务一起出现。问题是，对于第一个任务，按钮起作用并显示弹出窗口，但是如果您输入后续任务，按钮不起作用，请帮我找出错误是什么

    //создание задачи 
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>

这是如果我单击后续任务的按钮时弹出的错误（第一个任务除外，弹出窗口显示在第一个任务上）： TypeError:parentNode.add is not a function at HTMLUListElement.popupTask

javascript