JS实现的多标签待办列表仅首个标签功能生效该如何解决？

你的个人待办模块（第二个标签）功能失效完全是代码变量、对象引用写错导致的，和执行顺序无关，具体错误点和修复方案如下： #

已发现的所有错误点 #

• 错误1：个人待办新增时插错了存储数组
  Todo_Class2的add方法里，你把新生成的个人待办对象插入到了项目待办的存储数组todoObjectList1里，导致新增的个人待办根本没存到对应的数组中，自然无法渲染。
  修复：把todoObjectList1.unshift(todoObject2);改为todoObjectList2.unshift(todoObject2);
• 错误2：个人待办状态切换时操作错了数组
  Todo_Class2的done_undone方法里，修改状态的逻辑中间错误引用了todoObjectList1，导致状态修改不生效。
  修复：把整行状态判断代码替换为

  todoObjectList2[selectedTodoIndex2].isDone2 == false ? todoObjectList2[selectedTodoIndex2].isDone2 = true : todoObjectList2[selectedTodoIndex2].isDone2 = false;
  

• 错误3：删除按钮的ID绑定错误
  Todo_Class2的display方法里，给删除按钮设置data属性时错误引用了不存在的object_item1变量，导致删除功能无法匹配到对应待办。
  修复：把delBtn2.setAttribute("data-id2", object_item1.id2);改为delBtn2.setAttribute("data-id2", object_item2.id2);
• 错误4：个人待办点击切换状态时调用了第一个标签的方法
  Todo_Class2的display方法里，li元素的点击事件错误调用了myTodoList1.done_undone，应该调用个人待办实例的方法。
  修复：把myTodoList1.done_undone(selectedId2);改为myTodoList2.done_undone(selectedId2);
• 错误5：完成状态判断的属性名写错
  两个类的display方法里，判断待办是否完成的属性名和你定义的不一致，会导致已完成的样式不生效：
  • Todo_Class1里定义的属性是isDone1，判断时写成了object_item1.isDone，要改为object_item1.isDone1
  • Todo_Class2里定义的属性是isDone2，判断时写成了object_item2.isDone，要改为object_item2.isDone2

额外优化建议 #

你完全可以把两个类合并成一个通用Todo类，分别实例化两次传入不同的选择器、存储数组即可，不用重复写两套几乎完全一样的代码，能大幅降低类似的笔误概率。

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