我的代码中的 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 。
最佳答案
一旦 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);
}
})
关于javascript - 为什么 addEventListener 在我的 JavaScript 代码中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67290080/