待办列表开发中classList.add调用触发TypeError报错

报错原因 #

• 元素获取逻辑错误：getElementsByClassName("li")是查找class为li的元素，但页面中所有li标签都没有加class="li"属性，拿到的是空的元素集合，集合本身不存在classList属性，调用add方法时就会抛出Cannot read properties of undefined (reading 'add')错误
• 事件触发逻辑错误：li绑定onclick="check()"时没有传入当前点击的元素对象，check函数无法定位到要修改样式的目标li
• 变量引用错误：ul标签的id是myUL（大写L），JS代码中直接使用未声明的myUl（小写L）变量，新增待办项时会触发额外的变量未定义报错
• 新增项逻辑缺陷：用innerHTML +=拼接新li会重绘整个ul容器，原有li绑定的事件会全部丢失，且新生成的li没有绑定点击事件，无法触发选中效果
• HTML结构缺失：原代码中header区域只有闭合</div>标签，缺少对应的开标签，会导致样式渲染异常

修复方案 #

• 废弃提前获取固定li集合的写法，点击li时将当前元素对象this作为参数传入check函数
• check函数接收传入的目标li参数，调用classList.toggle实现点击切换选中/取消选中的交互（如果需要固定点击后只加类不取消，把toggle换成add即可）
• 修正ul元素获取逻辑，匹配id大小写
• 改用createElement+appendChild的方式新增li，给新生成的li单独绑定点击事件，避免原有事件丢失，同时新增空输入判断，避免添加空待办
• 补全缺失的HTML结构标签

修复后完整代码 #

script.js

const addBtn = document.getElementById("addBtn");
const inputEl = document.getElementById("myInput");
// 匹配id大小写，正确获取ul容器
const myUl = document.getElementById("myUL");

addBtn.addEventListener("click", () => {
    // 过滤空输入
    if (!inputEl.value.trim()) return;
    // 创建新li节点
    const newLi = document.createElement("li");
    newLi.textContent = inputEl.value;
    // 给新li绑定点击选中事件
    newLi.addEventListener("click", function () {
        check(this);
    })
    myUl.appendChild(newLi);
    // 添加完成后清空输入框
    inputEl.value = "";
})

// 接收传入的当前点击li元素
function check(liItem) {
    liItem.classList.toggle("checked");
}

index.html

原有CSS代码无需修改，仅修正HTML结构和事件绑定即可：

<h2>My To Do List</h2>
<!-- 补全原代码缺失的header开标签 -->
<div class="header">
    <input type="text" id="myInput" placeholder="输入待办事项">
    <span id="addBtn">Add</span>
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</div>

<ul id="myUL">
    <!-- 点击时传入当前元素this -->
    <li onclick="check(this)">Hit the gym</li>
    <li class="checked">Pay bills</li>
    <li onclick="check(this)">Meet George</li>
    <li onclick="check(this)">Buy eggs</li>
    <li onclick="check(this)">Read a book</li>
    <li onclick="check(this)">Organize office</li>
</ul>
<script src="script.js"></script>

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