How to diagnose and resolve an undefined element reference in my JS

  Kiến thức lập trình

This is HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PlanItt</title>
    <link rel="stylesheet" href="../src/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="header-container">
      <header>
        <h1>Plan.itt</h1>
      </header>
    </div>
    <div class="content-container">
      <div class="navbar-container">
        <div class="first-set-container">
          <ul>
            <li class="nav-item-list">Running</li>
            <li class="nav-item-list">Completed</li>
          </ul>
        </div>
        <h2>Projects</h2>
        <div class="second-set-container">
          <ul class="second-set-container-ul">
            <li class="nav-item">University</li>
            <li class="nav-item">School</li>
          </ul>
        </div>
        <div class="add-project-button">
          <button class="add-project-btn">+ Add Project</button>
        </div>
      </div>
      <div class="main-list-container">
        <!-- <div class="list-heading-and-button">
          <div class="list-heading"></div>
          <div class="add-task-button">
            <button class="add-task-btn">+ Add Task</button>
          </div>
        </div> -->
        <div id="tasks-display"></div>
      </div>
    </div>

    <!-- Add Project Pop Up -->

    <dialog id="add-project-pop-up">
      <form class="add-project-form" method="dialog">
        <label for="project-name">Project Name</label>
        <input
          type="text"
          id="project-name"
          name="project-name"
          placeholder="Enter Project Name"
          required
        />
        <div class="add-proj-pop-btns">
          <div class="pop-add-btn">
            <button type="submit" id="pop-up-save" class="">Add</button>
          </div>
          <div class="pop-cancel-btn">
            <button type="submit" id="pop-up-delete">Cancel</button>
          </div>
        </div>
      </form>
    </dialog>

    <!--  -->

    <!-- Add Task Pop Up -->

    <dialog id="add-task-pop-up">
      <form class="add-task-pop-up-form" method="dialog">
        <label for="task-name">Task Name</label>
        <input type="text" id="task-name" name="task-name" required />
        <label for="task-desc">Task Description</label>
        <textarea id="task-desc"> </textarea>
        <label for="task-date">Task Date</label>
        <input type="date" id="task-date" name="task-date" required />
        <label for="task-priority">Task Priority</label>
        <select id="task-priority" name="task-priority">
          <option value="high">High</option>
          <option value="medium">Medium</option>
          <option value="low">Low</option>
        </select>
        <div class="add-task-pop-up-btns-task">
          <div class="pop-add-btn-task">
            <button type="submit" id="pop-up-save-task-btn">Add</button>
          </div>
          <div class="pop-cancel-btn-task">
            <button type="submit" id="pop-up-delete-task-btn">Cancel</button>
          </div>`your text
        </div>
      </form>
    </dialog>

    <!--  -->
  </body>
  <!-- <script src="../src/index.js"></script> -->
  <script src="main.js"></script>
</html>

This is the JS, It is properly connected to the Index.js

export class AddTask {
  constructor(pageName) {
    this.pageName = pageName;

    this.popUpTaskDialog = document.querySelector("#add-task-pop-up");
    this.taskName = document.querySelector("#task-name");
    this.taskDescription = document.querySelector("#task-desc");
    this.taskDate = document.querySelector("#task-date");
    this.saveTaskBtn = document.querySelector("#pop-up-save-task-btn");
    this.cancelTaskBtn = document.querySelector("#pop-up-delete-task-btn");
    this.taskPriority = document.querySelector("#task-priority");

    this.saveTaskBtn.addEventListener("click", (event) => this.saveTask(event));
    this.cancelTaskBtn.addEventListener("click", (event) =>
      this.closeTaskDialog(event)
    );

    this.render();
  }

  render() {
    this.popUpTaskDialog.showModal();
  }

  saveTask(event) {
    event.preventDefault();
    if (this.taskName.value.trim() === "") {
      //this.alertLog("Please enter a task name");
    } else {
      try {
        const taskCardDisplay = document.querySelector("#tasks-display");
        const contentCard = this.createTaskCard();
        taskCardDisplay.appendChild(contentCard);
      } catch (error) {
        console.log(error);
        console.log("No task display found");
      }

      try {
        const taskMainPage = document.querySelector(".main-list-container");
        taskMainPage.innerHTML = "";
        taskMainPage.appendChild(this.taskCardDisplay);
      } catch (error) {
        console.log(error);
        console.log("No main list container found");
      }
      this.closeTaskDialog(event);
    }
  } 
}



This is a MERN project and all the relevant files are created, also the project worked well before addition of this function.
All the other required methods are created and they were all working

When I try to add a new task, I get the following error in the console

TypeError: Cannot read properties of null (reading 'appendChild')
    at n.saveTask (main.js:1:11774)
    at HTMLButtonElement.<anonymous> (main.js:1:11479)
main.js:1 No task display found
main.js:1 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at n.saveTask (main.js:1:11926)
    at HTMLButtonElement.<anonymous> (main.js:1:11479)
main.js:1 No main list container found

What should I do to resolve this?

3

LEAVE A COMMENT