列表容器Event Listener无响应，需实现点击LI标记勾选、SPAN删除功能

你的代码核心问题是DOM元素的tagName属性拼写错误——你写成了小写的tagname，而正确属性名是首字母大写的tagName，这导致点击事件的条件判断永远不成立，无法触发预期的勾选或删除逻辑。

修正后的完整代码如下：

const InputBox = document.getElementById("input-box");
const ListContainer = document.getElementById("list-container");

function addTask(){
    if(InputBox.value ===''){
        alert("Text Cannot be Empty!");
    }
    else{
        let li= document.createElement("li");
        li.innerHTML = InputBox.value;
        ListContainer.appendChild(li);
        let span = document.createElement("span");
        span.innerHTML = ".×"
        li.appendChild(span);
    }
    InputBox.value = "";
}

InputBox.addEventListener("keypress", function (event) {
    if (event.key === "Enter") {
        event.preventDefault();
        addTask();
    }
});

ListContainer.addEventListener("click",function(e){
    // 修正tagname为tagName
    if(e.target.tagName === "LI"){
        e.target.classList.toggle("checked");
    }
    // 同样修正此处的tagname
    else if(e.target.tagName === "SPAN"){
        e.target.parentElement.remove();
    }
},false);

补充说明：

• DOM元素的tagName属性返回大写的标签名，比如<li>元素返回"LI"，<span>返回"SPAN"，判断时要使用大写字符串匹配
• 只有拼写正确的tagName才能正确获取标签名，进而触发对应逻辑

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