Hi there,
In both the delete and edit functions buttonEl is passed to the function, but I can’t see where it is being passed from . There seems to be no link between the parameter and the button event. Can anyone help clear this up for me?
/* file: script.js */
const editTask = (buttonEl) => {
const dataArrIndex = taskData.findIndex(
(item) => item.id === buttonEl.parentElement.id
);
currentTask = taskData[dataArrIndex];
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0
Build a Todo App using Local Storage - Step 47
When you add a new task, you will see these edit and delete buttons here
That corresponds with this code here inside of your updateTaskContainer function
<button onclick="editTask(this)" type="button" class="btn">Edit</button>
<button onclick="deleteTask(this)" type="button" class="btn">Delete</button>
Right now you are building out the edit function.
The goal is that when you click on the edit button, the editTask function will be called and you will be able to edit the task
So buttonEl in this case refers to the edit button itself here
<button onclick="editTask(this)" type="button" class="btn">Edit</button>
Hope that helps
jwilkins.oboe:
the edit button itself
Aha, yeah thank you so much! Makes sense.
Side question if you don’t mind… is there a reason the ‘onclick’ is added here, rather than as an event listener? I’m guessing because when buttonEl is removed, the event listener will throw an error?
I don’t remember the full context for that design decision but you could refactor it in many ways to use addEventListener instead like this
const updateTaskContainer = () => {
tasksContainer.innerHTML = "";
taskData.forEach(
({ id, title, date, description }) => {
(tasksContainer.innerHTML += `
<div class="task" id="${id}">
<p><strong>Title:</strong> ${title}</p>
<p><strong>Date:</strong> ${date}</p>
<p><strong>Description:</strong> ${description}</p>
<button type="button" class="btn edit-btn">Edit</button>
<button type="button" class="btn delete-btn">Delete</button>
</div>
`)
}
);
};
tasksContainer.addEventListener("click", (e) => {
if (e.target.matches(".edit-btn")) {
editTask(e.target);
} else if (e.target.matches(".delete-btn")) {
deleteTask(e.target);
}
});
