When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the event for reading the task information. The delete button is placed within the list element.
The list element has a click handler specifically for reading the task information.
The delete button has its own handler for removing the task. I make sure to attach these events with stop event propagation to prevent triggering events on the parent elements.
The main problem here is that addEventListener only responds after the second click.
Another issue arises when removing the eventListeners altogether: clicking on the delete button also ends up triggering the event to read the task information.
I am seeking some genuine solutions to resolve these issues. Any help would be greatly appreciated. Thank you!
Check out the working demo => Working Demo
Here's my code:
window.deleteTask = function deleteTask(id) {
const deleteButton = document.getElementById(id);
deleteButton.addEventListener(
"click",
(event) => {
// event.preventDefault();
let taskAppObj = new ToDoConstructor();
taskAppObj.removetask(id);
event.stopPropagation();
},
false
);
};
window.getTaskInfo = function getTaskInfo(id) {
const li = document.getElementById(`data-${id}`);
li.addEventListener("click", (event) => {
let taskAppObj = new ToDoConstructor();
let task = window.storeContext.find((task) => task.id === id);
taskAppObj.readTheTask(task);
});
};