包含 for 循环的函数在单击事件后停止运行答案

【问题标题】：Function containing a for loop stops running after click event包含 for 循环的函数在单击事件后停止运行
【发布时间】：2019-12-08 10:55:57
【问题描述】：

我正在尝试制作一个需要以下内容的购物清单应用程序 -

根据用户输入将项目添加到列表中，并包含一个删除按钮。

通过样式切换被划线的项目。

当点击相应li中的删除按钮时，从列表中删除项目。

enter code here

我遇到的问题是，添加新列表项后，我无法划掉旧列表项。

我创建了一个 for 循环函数来循环遍历列表并打开和关闭 .done 类。它可以让我打开和关闭线路，但是一旦通过单击或按键事件将新项目添加到列表中，该功能就会停止工作。

我想通过放置 toggleDone();在 click 和 keypress 函数内部以及全局函数内部，它适用于新添加的列表项和原始列表项。

实际发生的情况是，如果我单击将新项目添加到列表中，它不再适用于原始列表项目，然后如果我按下键将项目添加到列表中，则该功能适用于旧列表项目以及按键项，但不是点击项。

const input = document.getElementById("userInput");
const btn = document.getElementById("enter");
const ul = document.querySelector("ul");

const list = document.getElementsByTagName("li");



function toggleDone(){
    for (let i=0; i < list.length; i++){
        list[i].addEventListener("click", function(){
            list[i].classList.toggle("done");
        });
    }
}

【问题讨论】：

btn.addEventListener("click", function(){ if (inputLength() > 0) { createListElement(); } toggleDone(); }) 这是我的点击事件
你也可以发布 HTML 吗？

标签： javascript html function loops dom

【解决方案1】：

如果我理解您的问题，您可以使用event delegation 技术来简化事情。将单击事件处理程序附加到 ul 元素而不是每个单独的 li - 这是因为事件向上传播（又名冒泡）。您可以检查传递给回调函数的event.target 以查看单击的确切内容。

这是一个示例，演示如何使用事件委托在 li 元素上切换样式：

document.querySelector("ul").addEventListener("click", function(event) {
  event.target.classList.toggle("done");
});

.done {
  text-decoration: line-through;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

【讨论】：

谢谢你这是完美的！为我糟糕的问题细节道歉。我对编码很陌生，发现很难用文字表达这些东西。感谢您的解释！

【解决方案2】：

您可能没有在正确的位置调用该函数
你应该在调用for循环时添加if else语句
对于 for 循环，不要说“let”（取决于版本）说“var”

此链接可能会有所帮助（示例）

https://www.w3schools.com/howto/howto_js_todolist.asp

【讨论】：