Con fines de aprendizaje, estoy creando una aplicación Todo en JavaScript. Tengo una función que toma el valor de entrada (Tarea) y lo empuja a una matriz de objetos.

Quiero poder eliminar la tarea del objeto de la matriz listOfTask cuando se hace clic en el botón Eliminar y quiero cambiar la propiedad completada de la tarea a verdadera cuando se hace clic en el botón completado. Mi problema es que el usuario puede hacer clic aleatoriamente en cualquier objeto de la matriz. Por lo tanto, no puedo vincular el clic del evento al objeto que quiero manipular usando index. Cualquier idea sobre cómo lograr esto será muy apreciada. Por cierto, esta es la primera vez que publico una pregunta, así que avíseme si mi pregunta necesita mejorar o aclararse.

 let listofTask=[]; function addTask(){ let taskAdded= document.getElementById('input1').value; let task=new Object; task.task=taskAdded; task.completed=false; listOfTask.push(task); appendTask(listOfTask); }

Entonces, la función appendTask() crea dos botones por cada tarea y los imprime en el HTML

 function appendTask(array){ if(array.length>0){ let div=document.getElementById('show-tasks'); let ul= document.createElement('ul'); let completedButton= document.createElement('input'); completedButton.value= 'Completed'; completedButton.type='button'; completedButton.onclick=function completedTask(){ this.parentNode.classList.add("mark-completed"); } let deleteButton= document.createElement('input'); deleteButton.value='Delete'; deleteButton.type='button'; deleteButton.onclick= function deleteTask(){ this.parentNode.remove(); } ul.innerHTML=ul.innerHTML+`<li>${array[array.length-1].task}</li> `; ul.appendChild(completedButton); ul.appendChild(deleteButton); div.appendChild(ul) } }

En este punto, puedo marcar con éxito una tarea como completada y eliminarla del HTML, pero también quiero poder manipular los objetos dentro de la matriz. ¡Gracias!