JS实现的待办列表按钮点击无响应，求代码修复及功能实现指导

原代码核心错误 #

• 未调用todolist函数，导致按钮点击事件绑定逻辑从未执行，是按钮无响应的核心原因
• 多处语法错误：documentcreateTextNode缺少.应为document.createTextNode、none为字符串需加引号"none"
• 逻辑顺序错误：创建li节点的逻辑放在点击事件外，多次点击只会复用同一个li元素无法新增多条
• API调用错误：document.getElementById(list)中list已经是DOM对象，无需再套getElementById；addEventListener('my-button')用法完全错误，该方法需绑定在DOM元素上，第一个参数为事件名如click
• 事件绑定逻辑冗余：每次新增元素都循环绑定关闭按钮事件，容易出现重复绑定问题，改用事件委托效率更高

核心实现思路 #

• 所有事件绑定均在JS中完成，无需修改HTML的onclick属性
• 新增待办：监听添加按钮点击事件，校验输入非空后创建li元素插入列表即可
• 标记已完成：使用事件委托监听列表容器的点击事件，点击li元素时切换completed类名实现样式标记，无需修改DOM结构
• 关闭按钮事件统一通过事件委托处理，无需每次新增元素后重新绑定

修正后完整代码 #

CSS（可选，用于标记已完成样式） #

/* 可直接加在HTML的head标签的style标签中 */
li {
  margin: 8px 0;
  cursor: pointer;
}
/* 已完成任务样式 */
.completed {
  text-decoration: line-through;
  color: #888;
}
.close {
  margin-left: 16px;
  color: #f44336;
  cursor: pointer;
}

JavaScript #

// 等待DOM加载完成后执行逻辑，建议将JS放在body标签末尾
document.addEventListener('DOMContentLoaded', function () {
  // 预获取公共DOM元素
  const addBtn = document.getElementById('my-button');
  const taskInput = document.getElementById('task');
  const todoList = document.getElementById('list');

  // 绑定新增任务事件
  addBtn.addEventListener('click', addTask);
  // 可选：支持回车快速新增
  taskInput.addEventListener('keydown', e => e.key === 'Enter' && addTask());

  // 事件委托：统一处理任务标记完成、关闭按钮点击
  todoList.addEventListener('click', function (e) {
    const target = e.target;
    // 点击任务项：切换已完成状态
    if (target.tagName === 'LI') {
      target.classList.toggle('completed');
    }
    // 点击关闭按钮：隐藏任务
    if (target.classList.contains('close')) {
      target.parentElement.style.display = 'none';
    }
  });

  // 新增任务逻辑
  function addTask() {
    const content = taskInput.value.trim();
    // 空内容校验
    if (!content) {
      alert('请输入任务内容');
      return;
    }
    // 创建任务节点
    const li = document.createElement('li');
    li.textContent = content;
    // 创建关闭按钮
    const closeBtn = document.createElement('span');
    closeBtn.className = 'close';
    closeBtn.textContent = '\u00D7';
    li.appendChild(closeBtn);
    // 插入列表
    todoList.appendChild(li);
    // 清空输入框
    taskInput.value = '';
  }
});

HTML（无需修改原有结构，可按需添加style标签） #

<body>
  <h2>To-do list!</h2>
  <div>
    <input type="text" id="task" placeholder="Write task" />
    <button id="my-button">Add task</button> 
  </div>
  <ul id="list">
    <li>kaa</li>
    <li>baa</li>
    <li>ss</li>
    <li>aa</li>
    <li>aaa</li>
  </ul>
  <!-- 建议把JS放在此处，或保留在外部JS文件中 -->
</body>

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