So basically I’m making a task management system, but I can’t seem to figure out how to check if a specific button was pressed from a task, and delete that same task with the button that was pressed.
Here’s my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>To-do list app</h1>
<p>An amazing to-do list application</p>
</div>
<div class="add-new-container">
<h3>Add new Task</h3>
<input type="text" placeholder="Description..">
<button id="add-new-btn">Add Task</button>
</div>
<div class="tasks-container">
<!-- <div class="task">
<p>[EX] Wash the dog</p>
<button>Complete</button>
</div> -->
</div>
<script src="main.js"></script>
</body>
</html>
Javascript:
console.log("1");
document.querySelector("#add-new-btn")?.addEventListener("click", function() {
const iValue = document.querySelector("input")?.value;
if (iValue == "") {
console.warn("All fields must be filled out");
alert("Please enter a task description!");
} else {
const taskDiv = document.createElement("div");
taskDiv.className = "task"
const taskDesc = document.createElement("p");
taskDesc.innerHTML = iValue;
taskDiv.appendChild(taskDesc);
const taskCompBtn = document.createElement("button")
taskCompBtn.textContent = "Complete"
taskCompBtn.id = "compBtn"
taskDiv.appendChild(taskCompBtn);
const taskContainer = document.querySelector(".tasks-container");
taskContainer?.appendChild(taskDiv);
}
});
document.querySelector("#compBtn").addEventListener("click", function() {
console.log('Completed task')
})
});```
I've tried using an id in the past, and assigning an id to each task, but I wasn't quite sure how to check the id's properly (if that makes sense).