How to Edit Task by Unique ID?

Question

I am trying to get the ID of the task when I click edit. The reason for this, is I want to use the ID from the data-id="${task.id}" that identifies each task created.

I have created a function that renders the task and it works:

taskArray.forEach((task) => {
        let divEl = document.createElement("div");
        divEl.classList.add("task-flex");
    
        divEl.innerHTML = `<div class="task-buttons">
            <img src="./resources/icons/edit.png" id="edit-button" alt="Edit Buttin"/>
            <img src="./resources/icons/bin.png" id="remove-button" alt="Bin Buttons" />
            <img src="./resources/icons/completed-task.png" id="complete-button" alt="Complete Task Button" />
          </div>
    
          <div class="task-to-do" data-id="${task.id}" data-value = "${task.timeStamp}">
              <div class="list" id="list-item-date">Due: ${task.date}</div>
              <div class="list" id="list-item-task">${task.task}</div>
          </div>`;
    
        taskListEl.append(divEl);
        
      });

This part I need assistance with.

I selected all of the edit-buttons, I then created a forEach loop for the edit-button in the forEach loop, I use the closest method to find the parent element of the edit button (editBtn)

This part is not working, its not doing anything in the console

// Event listener for edit buttons
    let editBtns = document.querySelectorAll(".edit-button");
    

    editBtns.forEach(editBtn => {
      let toDoTask = editBtn.closest(".task-to-do");
      let dataId = toDoTask.getAttribute("data-id");
      
      editBtn.addEventListener("click", (event) => {
          console.log(`Edit button clicked for task with data-id: ${dataId}`);
      });
  });

This is all one function

Answer 1

You can add the event listeners to each task's div (divEl) directly in the forEach loop. But instead of assigning an id to each img, you can for example use data- attribute to designate the actions. In your example, each icon image would get the same id for each task, which is not good practice. Maybe you meant class?

You would then define functions to handle edit, remove and complete actions, where the id of the task is passed as a variable from the event listener function. Here is an example:

const taskArray = [
  { id: 1, timeStamp: '1234', date: '01/01/01', task: 'Task 1' },
  { id: 2, timeStamp: '1234', date: '01/01/01', task: 'Task 2' },
  { id: 3, timeStamp: '1234', date: '01/01/01', task: 'Task 3' }
]

const taskListEl = document.getElementById('taskList')

taskArray.forEach((task) => {
  let divEl = document.createElement('div')

  divEl.classList.add('task-flex')
  divEl.innerHTML = `<div class="task-buttons">
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBlbmNpbCI+PHBhdGggZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVaIi8+PHBhdGggZD0ibTE1IDUgNCA0Ii8+PC9zdmc+"
      data-action="edit" alt="Edit Buttin"/>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRyYXNoIj48cGF0aCBkPSJNMyA2aDE4Ii8+PHBhdGggZD0iTTE5IDZ2MTRjMCAxLTEgMi0yIDJIN2MtMSAwLTItMS0yLTJWNiIvPjxwYXRoIGQ9Ik04IDZWNGMwLTEgMS0yIDItMmg0YzEgMCAyIDEgMiAydjIiLz48L3N2Zz4="
      data-action="remove" alt="Bin Buttons" />
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4="
      data-action="complete" alt="Complete Task Button" />
  </div>

  <div class="task-to-do" data-id="${task.id}" data-value = "${task.timeStamp}">
      <div class="list" id="list-item-date">Due: ${task.date}</div>
      <div class="list" id="list-item-task">${task.task}</div>
  </div>`

  divEl.addEventListener('click', (event) => {
    switch (event.target.dataset.action) {
      case 'edit':
        editTask(task.id)
        break
      case 'remove':
        removeTask(task.id)
        break
      case 'complete':
        completeTask(task.id)
        break
    }
  })

  taskListEl.append(divEl)
})

function editTask(id) {
  console.log('Edit task id ' + id)
}

function removeTask(id) {
  console.log('Remove task id ' + id)
}

function completeTask(id) {
  console.log('Complete task id ' + id)
}

body {
 font-family: 'Arial';
 font-size: 12px;
}
.task-buttons img {
  height: 14px;
  width: 14px;
  cursor: pointer;
 }
 
 .task-flex {
  display: flex;
  margin-bottom: 5px;
 }
 
 .task-to-do {
  display: flex;
 }
 
 .list {
  margin-left: 20px;
 }

<html>
<head></head>
<body>
  <div id="taskList"></div>
</body>
</html>