Todo List App添加任务失效问题求助（附完整代码）

• 阻止表单默认提交行为：如果添加按钮在<form>标签内，点击会触发表单提交刷新页面，刚创建的Todo元素会被清空。给点击事件添加阻止逻辑：

  document.querySelector('.add-btn').addEventListener('click', (e) => {
    e.preventDefault(); // 阻止页面刷新，保留新添加的元素
    // 你的Todo添加逻辑
  });
  

• 确认父容器选择正确：使用appendChild时，必须确保选中了正确的Todo列表容器（比如教程中的<ul id="todo-list">）。检查选择器是否写错（比如把id选择器#todo-list写成类选择器.todo-list），或是否在DOM未加载完成时就尝试获取容器。

• 检查Todo元素内容赋值：创建元素后，务必将输入框的内容赋值给新元素，否则会添加空元素：

  const inputVal = document.querySelector('#todo-input').value.trim();
  if (!inputVal) return; // 跳过空内容的添加
  const todoItem = document.createElement('li');
  todoItem.textContent = inputVal;
  document.querySelector('#todo-list').appendChild(todoItem);
  

• 确保事件绑定在DOM加载完成后：如果JS代码放在<head>标签中，页面未渲染完成就绑定事件会导致找不到按钮元素。解决方法：将JS代码移至<body>标签末尾，或用DOM加载事件包裹逻辑：

  document.addEventListener('DOMContentLoaded', () => {
    // 所有事件绑定、业务逻辑都放在这里
  });
  

• 调整输入框清空时机：不要先清空输入框再获取值，否则会拿到空字符串。正确顺序是先获取输入值，创建并添加Todo元素后再清空输入框：

  // 正确流程
  const inputVal = document.querySelector('#todo-input').value.trim();
  if (!inputVal) return;
  // 创建并添加Todo元素的逻辑...
  document.querySelector('#todo-input').value = ''; // 最后清空输入框
  

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