How to fix "Uncaught TypeError: Cannot read properties of null (reading 'appendChild'-CodePudding

Was trying to make a ToDo list and everything was going well until every time I tried to fill out a form and it started giving me that syntax error that is mentioned in the title.

Here's my code:

//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 >
      <h2>Tasks</h2>
    </section>
  </main>
</body>

Google keeps telling me to add a script src after every HTML element has been placed(I placed it above </body>) but it doesn't change anything. The output is meant to list out the input infinite times and when I do it nothing comes up but a console error.

CodePudding user response：

If you want to use querySelector with #, the element needs to have and in attribute. Your section for tasks is missing this attribute, either add it or try to use .tasks-list in querySelector argument to select by class attribute.

//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  id="task-list">
      <h2>Tasks</h2>
    </section>
  </main>
</body>

CodePudding user response：

There is no need to add an onload event listener if the <script> tag is at the bottom of your <body> element.

Also, you used while you actually wanted to use id="task-list"

Please see the code below:

//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>