The window.addEventListener
is getting executed
only on the second click
and surprisingly, after I click once on the li element
to read the task and again clicking on delete button, then the read task event gets fired up! as I’m keeping the delete button
mapped inside the list element
.
list element has a click handler to read the task information
.
The delete button has its remove task handler
. I’m attaching the events to stop event propagation
to its parent.
On delete button click only removeTask
method should get executed and on read task information only the readTheTask
method should get called.
The first problem
here is, as I’m using the addEventListener, it only gets executed after the second click.
And the second problem
if I remove attaching the eventListeners then on delete button click, the read task event also gets fired up!
How to resolve these issues?? Expecting some genuine solutions. The help would be appreciated. Thanks!
Here’s the => 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);
});
};
2
Answers
ReadTask
Delete Task
Also tested in the codesandbox
By doing some changes in your code it is working in single click (check result on full page)