JavaScript结合eventlisteners实现待办列表的ID混淆问题求助

你怀疑的元素ID匹配问题实际不存在，当前代码里JS选择器用的todo-input/todo-btn/todo-ul三个ID和HTML里的属性完全对应，功能异常是以下几个语法、逻辑问题导致的：

已定位的问题点 #

• 表单默认刷新行为未拦截：添加按钮是type="submit"类型，点击/按回车触发提交时页面会直接刷新，看起来就像新增的条目瞬间消失，输入框清空逻辑也会被页面重载打断
• 完成状态切换逻辑语法错误：done_undone方法里把赋值符号=错写成了比较符号==，代码里todoObjectList[selectedTodoIndex].isDone == true这行只是做值对比，根本没有实际修改isDone属性，标记完成的功能完全失效
• 点击事件冒泡冲突：删除图标是li的子元素，点击垃圾桶时事件会向上冒泡触发li的完成状态切换事件，容易出现删除操作连带触发状态修改、逻辑错乱的问题
• ID生成规则有缺陷：用数组长度作为条目ID，删除条目后数组长度变化，后续新增条目的ID会和已有条目重复，会出现删错条目、标记错状态的问题
• 实例变量未声明：初始化toDoList时没加const/let声明，会隐式创建全局变量，严格模式下直接抛出引用错误
• 初始静态条目丢失：HTML里默认写的"Pick up groceries"条目没有存入todoObjectList数组，第一次调用display()方法清空ul内容时，这个默认条目会直接被抹掉

对应修复代码 #

1. 统一用表单submit事件处理新增逻辑，拦截默认刷新行为，替换原来绑定在按钮、输入框上的两个事件：

   document.querySelector("#todo-form").addEventListener("submit", function(e) {
       e.preventDefault();
       toDoList.add();
   });
   

2. 修正完成状态切换的赋值逻辑，直接用取反写法避免符号写错：

   done_undone(x) {
       const selectedTodoIndex = todoObjectList.findIndex((item) => item.id == x);
       todoObjectList[selectedTodoIndex].isDone = !todoObjectList[selectedTodoIndex].isDone;
       this.display();
   }
   

3. 给删除按钮的点击事件加冒泡拦截，避免触发父级li的点击逻辑：

   delBtn.addEventListener("click", function(e) {
       e.stopPropagation();
       const deleteId = e.target.getAttribute("data-id");
       toDoList.deleteElement(deleteId);
   });
   

4. 替换ID生成规则，用全局自增ID避免重复：

   // 代码最顶部替换原来的数组声明
   const todoObjectList = [];
   let todoIdCounter = 0;
   
   // add方法里新建todo对象时修改id赋值
   const todoObject = {
       id: todoIdCounter++,
       todoText: todoInput,
       isDone: false,
   };
   

5. 补全实例声明：

   const toDoList = new toDo_Class(listSection);
   

6. 初始条目处理：要么把HTML里写死的默认li删掉，所有条目统一由JS渲染；要么初始化时把默认条目存入todoObjectList再调用一次display()。

ID匹配排查通用方法 #

如果后续怀疑ID不匹配，可以在获取元素后加一行控制台打印，输出null就说明选择器和DOM元素ID对不上：

const el = document.querySelector("#目标ID");
console.log("获取到的元素：", el);

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