如何修复待办事项列表中任务无法添加的问题-html教程-PHP中文网

如何修复待办事项列表中任务无法添加的问题

本文详细解析待办事项列表（to-do list）中任务提交后不显示的常见原因，重点修正 javascript 中的大小写错误、变量声明语法错误及事件监听细节，并提供可直接运行的修复代码与调试建议。

本文详细解析待办事项列表（to-do list）中任务提交后不显示的常见原因，重点修正 javascript 中的大小写错误、变量声明语法错误及事件监听细节，并提供可直接运行的修复代码与调试建议。

在构建基础待办事项列表时，看似逻辑完整的 JavaScript 代码却无法将输入的任务渲染到页面上，这类问题通常源于细微但关键的语法或拼写错误。根据你提供的代码，核心故障点有两个：

e.preventdefault() 拼写错误：JavaScript 是大小写敏感语言，正确方法名为 e.preventDefault()（注意 D 和 F 大写），误写为小写的 preventdefault 会导致该方法未被调用，表单默认提交行为未被阻止，页面刷新后新增内容瞬间丢失。
变量声明语法错误：const_task_el = ... 缺少空格，导致非法标识符；正确应为 const task_el = ...。此外，后续代码中使用了未声明的 task_el（如 task_el.classList.add("task")），若变量未正确定义，整段逻辑会因 ReferenceError 中断执行，后续 DOM 操作（如 appendChild）完全不会发生。

✅ 修复后的完整 JavaScript 代码如下（已修正上述问题，并增强健壮性）：

window.addEventListener('load', () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const listEl = document.querySelector("#tasks");

  form.addEventListener('submit', (e) => {
    e.preventDefault(); // ✅ 正确大小写：preventDefault

    const task = input.value.trim(); // ✅ 建议增加 trim() 去除首尾空格

    if (!task) {
      alert("Please enter a task!");
      return;
    }

    const taskEl = document.createElement("div"); // ✅ 修正：const taskEl = ...
    taskEl.classList.add("task");

    const taskContentEl = document.createElement("div");
    taskContentEl.classList.add("content");
    taskContentEl.innerText = task;

    taskEl.appendChild(taskContentEl);
    listEl.appendChild(taskEl);

    // ✅ 可选：添加后清空输入框，提升用户体验
    input.value = "";
  });
});

? 额外注意事项：