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?