JS待办列表新增条目与classList.toggle勾选功能异常问题求助

问题修复说明 #

现有代码错误点

• 待办项点击事件入参使用错误：回调函数接收的ev是事件对象，需要通过ev.target或this获取触发点击的待办项DOM节点，直接操作ev不会生效；同时手动设置backgroundColor会覆盖CSS类的样式，导致classList.toggle的样式不生效。
• 新增功能语法错误：获取todo列表容器时缺少document.前缀，导致节点获取失败；给新待办项添加关闭按钮时，错误对单个DOM节点使用数组下标[i]。
• 全局变量污染：所有循环共用全局声明的var i，循环结束后残留的i值会导致新增逻辑执行报错。
• 新增元素未绑定事件：初始仅给页面加载完成时已存在的待办项绑定了勾选、关闭事件，后续新增的待办项无法触发对应交互；且每次新增时全量重新绑定所有关闭按钮事件，逻辑冗余。

修正后的完整JS代码

// 初始化现有待办项
initTodoItems()

// 绑定新增按钮事件
document.getElementById('add-button').addEventListener('click', add)

function initTodoItems() {
  const todoItems = document.getElementsByClassName('todo-item')
  for (let i = 0; i < todoItems.length; i++) {
    // 加关闭按钮
    const span = document.createElement("span")
    span.innerHTML = "Close"
    span.className = "closebutton"
    todoItems[i].appendChild(span)
    // 绑定关闭事件
    bindCloseEvent(span)
    // 绑定勾选事件
    bindCheckEvent(todoItems[i])
  }
}

function bindCloseEvent(closeBtn) {
  closeBtn.onclick = function() {
    const listitem = this.parentElement
    listitem.style.display = "none"
  }
}

function bindCheckEvent(todoItem) {
  todoItem.onclick = function(ev) {
    // 避免点关闭按钮也触发勾选
    if (ev.target.classList.contains('closebutton')) return
    this.classList.toggle("todo-item-checked")
  }
}

function add() {
  const input = document.getElementById('todoinput')
  const text = input.value.trim()
  if (!text) return // 空内容不新增
  // 创建新待办项
  const listitem = document.createElement("li")
  listitem.className = "todo-item"
  const t = document.createTextNode(text)
  listitem.appendChild(t)
  // 加关闭按钮
  const span = document.createElement("span")
  span.innerHTML = "Close"
  span.className = "closebutton"
  listitem.appendChild(span)
  // 插入列表
  const myul = document.getElementById('todo-list')
  myul.appendChild(listitem)
  // 给新元素绑定事件
  bindCloseEvent(span)
  bindCheckEvent(listitem)
  // 清空输入框
  input.value = ''
}

其他优化点

• 新增空内容校验，避免添加空白待办项
• 点击关闭按钮时不会触发待办项的勾选逻辑
• 新增完成后自动清空输入框，提升使用体验

内容的提问来源于stack exchange，提问作者Anđelo Motika