基于done类实现的列表项点击添加/取消删除线功能失效排查

你的代码存在以下几个关键问题，导致功能无法正常运行：

• HTMLCollection不能直接绑定事件：document.getElementsByTagName("li")返回的是类数组的HTMLCollection，不是单个元素，必须遍历每个<li>单独添加事件监听。
• 事件目标未正确获取：strikeThough函数里的target变量未定义，需要通过事件参数event获取点击目标，即event.target。
• 标签名字段拼写错误：tagname应该改为tagName，且该属性返回大写字符串，判断时要对应"LI"。
• 类名操作方法错误：className是字符串类型，没有toggle方法，正确的类名切换应该用classList.toggle()。
• 新增列表项未绑定事件：当前代码只给页面初始的<li>加了事件，通过输入框新增的列表项没有点击事件，需要在创建新元素时一并绑定。

修正后的script.js代码如下：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("li");

function inputLength() {
    return input.value.length;
}

// 把点击切换类名的逻辑抽成独立函数
function toggleDoneClass(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}

// 遍历初始的li，绑定点击事件
for (var i = 0; i < li.length; i++) {
    li[i].addEventListener('click', toggleDoneClass);
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    // 给新创建的li绑定点击事件
    li.addEventListener('click', toggleDoneClass);
    ul.appendChild(li);
    input.value = "";
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

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