Question

如何修复“未捕获的类型错误：无法读取 null 的属性（读取‘appendChild’）”？

2022-10-30

964

javascript frontend syntax-error

我尝试制作一个待办事项列表，一切都进展顺利，直到每次我尝试填写表格时，它开始给我标题中提到的语法错误。

这是我的代码：

//Random Alert
alert('Better get to it or moms going to be angry')

//Real work below
the window.addEventListener('load', () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#task-list");

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    const task = input.value;

    if (!task) {
      alert("Please add/fill out the task");
      return;
    }

    const task_el = document.createElement("div");
    task_el.classList.add("task");

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

    task_el.appendChild(task_content_el);

    list_el.appendChild(task_el);

  })
})

<body>
  <header>
    <h1>ToDo list 2022(version 1)</h1>
    <form id="new-task-form">
      <input type="text" id="new-task-input" placeholder="what's on your mind today?">
      <input type="submit" id="new-task-submit" value="Add task">
    </form>
  </header>
  <main>
    <section class="task-list">
      <h2>Tasks</h2>
    </section>
  </main>
</body>

Google 一直告诉我在放置每个 HTML 元素后添加一个脚本 src（我将其放置在 </body> 上方），但它不会改变任何东西。输出旨在无限次列出输入，当我这样做时，除了控制台错误之外什么都没有出现。

Answer 1

如果您想将 querySelector 与 # 一起使用，则元素需要具有 in 属性。您的任务部分缺少此属性，请添加它或尝试在 querySelector 参数中使用 .tasks-list 按类属性进行选择。

//Random Alert
alert('Better get to it or moms going to be angry')

//Real work below
window.addEventListener('load', () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#task-list");

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    const task = input.value;

    if (!task) {
      alert("Please add/fill out the task");
      return;
    }

    const task_el = document.createElement("div");
    task_el.classList.add("task");

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

    task_el.appendChild(task_content_el);

    list_el.appendChild(task_el);

  })
})

<body>
  <header>
    <h1>ToDo list 2022(version 1)</h1>
    <form id="new-task-form">
      <input type="text" id="new-task-input" placeholder="what's on your mind today?">
      <input type="submit" id="new-task-submit" value="Add task">
    </form>
  </header>
  <main>
    <section class="task-list" id="task-list">
      <h2>Tasks</h2>
    </section>
  </main>
</body>

Answer 2

如果 <script> 标签位于 <body> 元素的底部，则无需添加 onload 事件监听器。

此外，您使用了 class="task-list" ，而实际上您想使用 id="task-list"

请参阅以下代码：

//Random Alert
alert('Better get to it or moms going to be angry')

//Real work below
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#task-list");

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const task = input.value;
  if (!task) {
    alert("Please add/fill out the task");
    return;
  }

  const task_el = document.createElement("div");
  task_el.classList.add("task");

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

  task_el.append(task_content_el);
  list_el.append(task_el);
})

<body>
  <header>
    <h1>ToDo list 2022(version 1)</h1>
    <form id="new-task-form">
      <input type="text" id="new-task-input" placeholder="what's on your mind today?">
      <input type="submit" id="new-task-submit" value="Add task">
    </form>
  </header>
  <main>
    <section id="task-list">
      <h2>Tasks</h2>
    </section>
  </main>
  <script src="app.js"></script>
</body>