JavaScript+localStorage开发待办清单点击勾选按钮报classList.add错误

你在check()函数中传入的itemValue是待办事项的文本字符串，不是对应的DOM元素，字符串本身不存在classList属性，调用classList.add()自然会抛出「无法读取undefined的add属性」的类型错误。

1. 给待办条目添加唯一标识 #

修改渲染待办条目的代码，给每个条目外层div添加唯一id，方便后续查找元素：

for (let a = 0; a < localStorage.length; a++) {
   const itemValue = localStorage.key(a);
   // 把内容中的空格替换为横杠，避免id出现非法字符
   const todoId = `todo-${itemValue.replace(/\s/g, '-')}`;
   addedItems.innerHTML += `<div class='text' id="${todoId}"> <div>${itemValue}</div> <div> 
                            <i onclick='check("${itemValue}")' class="fas fa-check"></i><i 
                            onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i> 
                            </div></div> <br>`;
}

2. 修改check函数逻辑 #

先通过id拿到对应DOM元素，再操作类名：

function check(itemValue) {
   const todoId = `todo-${itemValue.replace(/\s/g, '-')}`;
   const todoElement = document.getElementById(todoId);
   // 兼容判断，避免元素不存在时报错
   if(todoElement) {
      todoElement.classList.add("mystyle");
      // 可选：把勾选状态存入localStorage，刷新后样式不丢失
      localStorage.setItem(itemValue, 'checked');
   }
}

3. 可选：页面加载时自动恢复已勾选样式 #

如果需要刷新页面后已勾选的条目仍然保留样式，可以修改渲染逻辑，读取localStorage中存储的状态判断是否要加类：

for (let a = 0; a < localStorage.length; a++) {
   const itemValue = localStorage.key(a);
   const itemStatus = localStorage.getItem(itemValue);
   const todoClass = itemStatus === 'checked' ? 'text mystyle' : 'text';
   const todoId = `todo-${itemValue.replace(/\s/g, '-')}`;
   addedItems.innerHTML += `<div class='${todoClass}' id="${todoId}"> <div>${itemValue}</div> <div> 
                            <i onclick='check("${itemValue}")' class="fas fa-check"></i><i 
                            onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i> 
                            </div></div> <br>`;
}

• 现有添加判断if (itemValue && itemValue2)中的itemValue2是固定空格，永远为真，判断没有实际作用，建议改成if (itemValue.trim())，避免用户输入全空格的无效待办。
• 现在用待办文本作为localStorage的key，输入相同内容的待办会被覆盖，可改为用时间戳作为唯一key，存储包含文本、勾选状态的对象，解决重复内容冲突问题。

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