勾选复选框时如何用JS添加text-decoration: line-through样式？解决checkBox未定义报错

DevOps 小满

2026-10-3

错误原因

作用域问题：checkBox 是 addTask 函数内的局部变量，函数外的代码无法访问，直接触发未定义报错
事件监听缺失：现有判断checkbox状态的代码仅在脚本首次加载时执行一次，无法响应用户点击checkbox的操作
类绑定范围错误：直接给id为taskItem的整个ul列表切换样式，会导致所有任务同时被划线，仅需给当前勾选的对应任务加类即可
DOM元素未提前获取：直接使用taskItem访问DOM，没有提前通过DOM选择器获取元素，部分浏览器会执行失败

修正后的JS代码

// 提前全局获取任务列表容器元素
const taskItem = document.getElementById("taskItem");
// 全局任务存储数组，放在函数外避免每次新增任务被重置
const taskList = [];

function addTask() {
  const checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  const task = document.createElement("li");
  const inputVal = document.getElementById("taskName").value.trim();

  if (inputVal === "") {
    alert("Luilak!");
    return;
  }

  task.textContent = inputVal;
  // 将复选框放在任务li内部，结构更合理
  task.appendChild(checkBox);
  taskItem.appendChild(task);
  // 存入全局任务数组
  taskList.push(inputVal);
  // 清空输入框
  document.getElementById("taskName").value = "";

  // 绑定复选框变更事件，切换当前任务的完成状态
  checkBox.addEventListener("change", function () {
    task.classList.toggle("completed", this.checked);
  });
}