如何实现点击li元素时切换其done类？

你的问题出在动态元素的事件绑定上：页面加载时你用循环绑定的点击事件，只能作用于当时已经存在的li元素，但通过按钮新增的li是后续创建的，这些元素并没有被绑定事件，所以点击无效。

下面给你两种可行的解决方案：

方案1：给每个新创建的li直接绑定事件 #

修改createListElement函数，在创建li的同时就为它添加点击事件：

function createListElement() {
  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  // 绑定点击事件，切换done类
  li.addEventListener("click", function() {
    this.classList.toggle("done");
  });
  ul.appendChild(li);
  input.value = "";
}

这种方法简单直接，每个新生成的li都会带上自己的点击事件，适合元素数量不多的场景。

方案2：使用事件委托（更推荐） #

把点击事件绑定在父元素ul上，利用事件冒泡机制来处理所有li的点击——不管li是初始就有的还是后来动态创建的，都能生效：

// 给ul添加点击事件监听
ul.addEventListener("click", function(e) {
  // 确认点击的目标是li元素
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("done");
  }
});

这种方法不需要给每个li单独绑定事件，性能更优，尤其是当列表项数量较多时。

完整代码示例（使用事件委托） #

let button = document.getElementById("button");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");

function createListElement() {
  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
}

function addListAfterClick() {
  if (input.value.length > 0) {
    createListElement();
  }
}

button.addEventListener("click", addListAfterClick);

// 事件委托处理li点击
ul.addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    e.target.classList.toggle("done");
  }
});

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

<input type="text" id="userinput">
<button id="button">+</button>
<ul></ul>

内容的提问来源于stack exchange，提问作者Paulino G