在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？

使用 javascript 实现 todolist，点击 checkbox 后无法正确归类任务

问题描述：
在使用 javascript 实现的 todolist 中，点击“正在进行”任务中的 checkbox，无法将任务自动归类到“已完成”任务列表。

原因分析：
在提供的代码中，发现有一个单词拼写错误：将 form 写成了 from。

预期结果：
点击“正在进行”列表中的 checkbox，任务应该被移到“已完成”列表中。

实际错误信息：
未提供

解决方法：
将代码中的 所有 from 全部替换为 form：

// ...
contentdom.addeventlistener("change", (event) => {
  let target = event.target;
  if (target.dataset.form === "todo" && target.tagname === "input") {
    let index = +target.dataset.index;
    // ...
  } else if (target.dataset.form === "done" && target.tagname === "input") {
    let index = +target.dataset.index;
    // ...
  }
});

contentdom.addeventlistener("click", (event) => {
  let target = event.target;
  if (target.dataset.form === "todo" && target.tagname === "img") {
    let index = +target.dataset.index;
    // ...
  } else if (target.dataset.form === "done" && target.tagname === "img") {
    let index = +target.dataset.index;
    // ...
  }
});
// ...

修正后的代码：

let data = {
  todoArr: [],
  doneArr: [],
};

function main() {
  let storage = localStorage.getItem("todo");
  if (storage !== null) {
    data = JSON.parse(storage);
    render(data);
  }

  // ...

  // 获取容器 DOM
  let contentDom = document.getElementById("content");

  // ...

  contentDom.addEventListener("change", (event) => {
    let target = event.target;
    if (target.dataset.form === "todo" && target.tagName === "INPUT") {
      let index = +target.dataset.index;
      // ...
    } else if (target.dataset.form === "done" && target.tagName === "INPUT") {
      let index = +target.dataset.index;
      // ...
    }
  });

  contentDom.addEventListener("click", (event) => {
    let target = event.target;
    if (target.dataset.form === "todo" && target.tagName === "IMG") {
      let index = +target.dataset.index;
      // ...
    } else if (target.dataset.form === "done" && target.tagName === "IMG") {
      let index = +target.dataset.index;
      // ...
    }
  });
}

let imgSrc =
  "https://ts1.cn.mm.bing.net/th/id/R-C.f1d02b4e59751fba384245ebf3c42688?rik=xMnkkxisjTQERA&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_513596.png&ehk=gUYMqjE9AcyrMbJullahgYyLu0QYUGZPs0Gm%2f8%2bn4Nc%3d&risl=&pid=ImgRaw&r=0&";

function render(data) {
  // ...
}

// ...

以上就是在使用 JavaScript 实现的 TodoList 中，如何正确判断 Checkbox 点击事件，从而归类任务？的详细内容，更多请关注其它相关文章！