数组长度在清空后不会增加，并且无法在 HTML 上添加鼠标事件

我想用JavaScript和HTML制作自己的杂货/任务列表。我可以毫无问题地将内容添加到列表中，但我有两个问题：

如果我将项目添加到列表中，然后按"清除"按钮删除列表中的所有内容，它可以工作。但是，当我在清除列表后将其添加回列表时，我的控制台会通知我，尽管屏幕上显示了新任务，但我的数组仍然为空。
我的第二个问题更大。看，我所有的任务都在我认为是一个数组中，但实际上是一个 HTML 集合。因此，当我尝试设置onclick事件时，它就是无法运行。我不知道为什么，我尝试使用以下问题：从 DOM 中删除 HTMLCollection 元素 .它没有用。我尝试使用item，HTMLCollection item((方法。没用。我的最后一次尝试是使用for(let thing of...但仍然没有结果。

这是我的代码：

let listGro = document.getElementById("list");
let aButton = document.getElementById("add");
let cButton = document.getElementById("clear");
let tasks = document.getElementsByTagName("li");
aButton.onclick = function addItem() {
let newThing = prompt("What do you want to add?"); // asking what the person wants
if (newThing) { // checking if the user actually added something
let newItemList = document.createElement("li"); //create item list
newItemList.className = "item";
let newItemListText = document.createTextNode(newThing); // create text
newItemList.appendChild(newItemListText); // append text
listGro.appendChild(newItemList); // append new element
console.log(`New task addednNumber of tasks in the list: ${tasks.length}`);
} else {
alert("You can't add nothing");
}
};
cButton.onclick = function clearList() {
var conf = confirm("Are you sure you want to clear the list?");
if (conf && tasks.length != 0) {
for (let i = 0; i < tasks.length; i++) {
tasks[i].style.display = "none";
}
tasks = [];
}
}
for(let thing of tasks) {
//tasks[i].onclick = function removeOrEditItem() {
/*let demand = prompt("Do you want to edit or remove the item?nPlease answer with 'edit' or 'remove'nIf this is a mistake, just enter nothing.");
if (demand === "edit") {
let editItem = prompt("What is your new thing?");
tasks[i].innerHTML = editItem;
} else if (demand === "remove") {
tasks[i].splice(i, 1);
}
console.log("clicked");
};*/

// The thing above was a previous attempt with for(let i; i< items.length... you can work with that or below.
thing.onclick = function removeTask() {
thing.style.display = "none";
console.log("removed");
}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website template</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
</head>
<body>
<h1>Grocery lists manager</h1>
<h2>Welcome! here you can manage your grocery list!</h2>
<ul id = "list"><span>List:</span></ul>
<button id = "add">Add</button>
<button id = "clear">Clear list</button>
</body>
<script src = "script.js"></script>
</html>

清除任务列表时，任务列表将保持为空，因为您将用空数组覆盖 HTML 集合。您已将document.getElementsByTagName("li");分配给tasks，这是一个实时集合。重新分配[]将给它一个非活动的空数组。您应该从 DOM 中删除每个任务元素并让您的实时集合自动更新，而不是使用tasks[i].style.display="none直观地隐藏任务并手动重置tasks集合。

从 DOM 中删除集合有一些陷阱，但通常可以通过如下所示的方法完成：

while(tasks.length > 0) {
tasks[0].parentNode.removeChild(tasks[0]);
}

不会添加事件侦听器，

因为添加事件侦听器的代码仅在加载脚本时运行一次。当然，在加载脚本的实例中，列表中没有任务。首次添加事件侦听器时，将事件侦听器添加到单个newItemList。

确保从 DOM 中删除任务，而不是只是隐藏它。

newItemList.onclick = function removeTask() {
newItemList.parentNode.removeChild(newItemList);
console.log("removed");
}

你完整的 JavaScript 可能看起来像：

let listGro = document.getElementById("list");
let aButton = document.getElementById("add");
let cButton = document.getElementById("clear");
let tasks = document.getElementsByTagName("li");
aButton.onclick = function addItem() {
let newThing = prompt("What do you want to add?"); // asking what the person wants
if (newThing) { // checking if the user actually added something
let newItemList = document.createElement("li"); //create item list
newItemList.className = "item";
let newItemListText = document.createTextNode(newThing); // create text
newItemList.appendChild(newItemListText); // append text
newItemList.onclick = function removeTask() {
newItemList.parentNode.removeChild(newItemList);
console.log("removed");
}
listGro.appendChild(newItemList); // append new element
console.log(`New task addednNumber of tasks in the list: ${tasks.length}`);
} else {
alert("You can't add nothing");
}
};
cButton.onclick = function clearList() {
var conf = confirm("Are you sure you want to clear the list?");
if (conf && tasks.length != 0) {
while(tasks.length > 0) {
tasks[0].parentNode.removeChild(tasks[0]);
}
}
};

相关内容

最新更新

热门标签：