javascript - 为什么 addEventListener 在我的 JavaScript 代码中不起作用

Question

我的代码中的 addEventListener 有问题。这些是 Todo 任务，但是当我使用 addEventListener 通过单击按钮删除它们时它不起作用，但是当我在 addTask 函数中声明仅函数时它起作用，所以我用按钮删除了任务。

var Task, TodoList, deleteButton, editButton, completeButton;

function addTask() {
  var inputValue = document.getElementsByTagName("input")[0];
  TodoList = document.getElementsByClassName("todo-list")[0];
  Task = document.createElement("li");
  var txt = document.createTextNode(inputValue.value);
  if (inputValue.value == "" || isNaN(inputValue.value) !== true) {
    alert("Input is not unacceptable");
  } else {
    Task.classList.add("li-item");
    Task.appendChild(txt);
    TodoList.appendChild(Task);
  }
  inputValue.value = " ";
    createButton();
    deleteButton.addEventListener("click", deleteTask);
}

function createButton() {
    deleteButton = document.createElement("button");
    editButton = document.createElement("button");
    completeButton = document.createElement("button");
    deleteButton.appendChild(document.createTextNode("Delete"));
    deleteButton.classList.add("delete-btn");
    Task.appendChild(deleteButton);
    editButton.appendChild(document.createTextNode("Edit"));
    Task.setAttribute("contentEditable", "false");
    editButton.classList.add("edit-btn");
    Task.appendChild(editButton);
    completeButton.appendChild(document.createTextNode("Complete"));
    completeButton.classList.add("complete-btn");
    Task.appendChild(completeButton);
}

function deleteTask() {
    TodoList.removeChild(Task);
}

此外，此代码仅删除最后一个 child 。

Answer 1

一旦 dom 安装，您需要运行 yow 代码

window.addEventListener('DOMContentLoaded', (event) => {
    var Task, TodoList, deleteButton, editButton, completeButton;

function addTask() {
  var inputValue = document.getElementsByTagName("input")[0];
  TodoList = document.getElementsByClassName("todo-list")[0];
  Task = document.createElement("li");
  var txt = document.createTextNode(inputValue.value);
  if (inputValue.value == "" || isNaN(inputValue.value) !== true) {
    alert("Input is not unacceptable");
  } else {
    Task.classList.add("li-item");
    Task.appendChild(txt);
    TodoList.appendChild(Task);
  }
  inputValue.value = " ";
    createButton();
    deleteButton.addEventListener("click", deleteTask);
}

function createButton() {
    deleteButton = document.createElement("button");
    editButton = document.createElement("button");
    completeButton = document.createElement("button");
    deleteButton.appendChild(document.createTextNode("Delete"));
    deleteButton.classList.add("delete-btn");
    Task.appendChild(deleteButton);
    editButton.appendChild(document.createTextNode("Edit"));
    Task.setAttribute("contentEditable", "false");
    editButton.classList.add("edit-btn");
    Task.appendChild(editButton);
    completeButton.appendChild(document.createTextNode("Complete"));
    completeButton.classList.add("complete-btn");
    Task.appendChild(completeButton);
}

function deleteTask() {
    TodoList.removeChild(Task);
}

})