删除Todo待办项时报Cannot read 'isDone' of undefined错误如何解决

错误原因 #

你遇到的报错是事件冒泡导致的逻辑冲突，和脚本加载顺序无关，所以你把script标签放到HTML底部的操作不会生效，具体触发流程：

1. 你的代码同时给li元素和子元素删除按钮都绑定了点击事件
2. 点击删除按钮时，先触发删除逻辑，把对应id的待办项从todoObjectList数组中移除
3. 点击事件冒泡到父级li元素，触发done_undone方法，此时传入的id对应的待办项已经不存在，findIndex方法找不到匹配项会返回-1，访问todoObjectList[-1]得到undefined，读取undefined的isDone属性就抛出了该类型错误。

修复方案 #

任选以下一种方案即可解决问题：

方案1：阻止删除按钮的事件冒泡 #

在删除按钮的点击回调中新增阻止冒泡的逻辑，避免事件传递到父级li：

delButton.addEventListener("click", function(e) {
    e.stopPropagation(); // 新增此行，阻止事件向上冒泡
    const deleteId = e.target.getAttribute("data-id");
    personalTodoList.deleteElement(deleteId);
})

方案2：给done_undone方法加边界校验 #

在操作数组前先判断对应元素是否存在，避免访问不存在的下标：

done_undone(x) {
    const selectedTodoIndex = todoObjectList.findIndex((item) => item.id == x);
    // 找不到对应待办项直接返回，不执行后续逻辑
    if (selectedTodoIndex === -1) return;
    // 额外优化：你原来的三目运算可以简化为直接取反，逻辑完全等价
    todoObjectList[selectedTodoIndex].isDone = !todoObjectList[selectedTodoIndex].isDone;
    console.log(todoObjectList[selectedTodoIndex].isDone);
    this.display();
}

内容的提问来源于stack exchange，提问作者Sarah S.