JavaScript待办列表新增任务时自定义复选框不显示问题求助

问题根源 #

你新增任务的逻辑里，只给<li>元素添加了任务文本，没有将自定义复选框的完整结构（.container标签包裹的原生复选框和自定义勾选框）嵌入到每个新任务项中。原HTML里的.container是独立存在的，和动态生成的任务没有关联，所以新任务自然不会显示复选框。另外HTML中输入框的type属性拼写成了tyoe，这是一个小错误，会影响输入框的正常功能。

修复步骤 #

1. 修正HTML输入框的拼写错误
   将输入框代码修改为：

<input type="text" id="inputbutton">

（注：<input>是自闭合标签，不需要写</input>）

2. 重构JavaScript的任务添加逻辑
   修改task()函数，为每个新任务构建完整的复选框结构，并整合到任务项中，同时添加空输入判断、清空输入框的优化：

let userinput = [];

function task() {
  const inputText = document.getElementById("inputbutton").value.trim();

  // 空输入直接返回
  if (!inputText) return;
  // 检查任务是否已存在
  if (userinput.includes(inputText)) {
    alert("Already added");
    return;
  }

  userinput.push(inputText);
  let tasklist = document.getElementById("tasklist");
  let listItem = document.createElement("li");

  // 构建自定义复选框结构
  const container = document.createElement("label");
  container.className = "container";
  
  const checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  
  const checkmark = document.createElement("div");
  checkmark.className = "checkmark";

  // 将复选框元素添加到container中
  container.appendChild(checkbox);
  container.appendChild(checkmark);

  // 创建任务文本节点
  const taskText = document.createTextNode(inputText);

  // 将复选框和文本添加到任务项
  listItem.appendChild(container);
  listItem.appendChild(taskText);

  tasklist.appendChild(listItem);

  // 清空输入框
  document.getElementById("inputbutton").value = "";
}

补充说明 #

• 自定义复选框的CSS样式无需修改，因为样式是基于.container、.checkmark这些类名定义的，只要动态生成的元素带有这些类名，样式就会自动生效。
• 新增了输入框清空逻辑，提升用户体验；添加了空输入判断，避免添加空白任务。

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