CS50W作业求助：HTML+JS任务创建器无法向<ul>添加<li>

问题根源 #

你的代码存在两个关键错误，导致<li>无法正确追加到目标列表：

• 追加目标错误：你把创建的<li>元素追加到了id为task的输入框上，而非id为tasks的<ul>容器
• 按钮选择器错误：最后禁用按钮时使用了不存在的#button选择器，实际提交按钮的id是submit

修正后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', () => {
  const submitBtn = document.querySelector('#submit');
  const taskInput = document.querySelector('#task');
  const tasksList = document.querySelector('#tasks');

  submitBtn.disabled = true;

  taskInput.onkeyup = () => {
    submitBtn.disabled = taskInput.value.length === 0;
  }

  document.querySelector('form').onsubmit = function() {
    const taskText = taskInput.value;
    const li = document.createElement('li');
    li.textContent = taskText; // 用textContent更安全，避免XSS风险
    tasksList.append(li); // 追加到正确的<ul>容器
    taskInput.value = '';
    submitBtn.disabled = true; // 禁用正确的提交按钮
    return false;
  }
});

修正说明 #

1. 将document.querySelector('#task').append(li)改为document.querySelector('#tasks').append(li)，确保<li>被添加到任务列表的<ul>中
2. 将document.querySelector('#button').disabled = true改为document.querySelector('#submit').disabled = true，正确禁用提交按钮
3. 额外优化：用textContent替代innerHTML设置<li>内容，避免用户输入特殊字符引发的安全问题；同时缓存DOM元素选择器，减少重复查询开销

原HTML代码（无需修改） #

<h1>Tasks</h1>
<ul id="tasks"></ul>
<form>
  <input type="text" placeholder="Create a new task" id="task">
  <input type="submit" id="submit">
</form>

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