For learning purposes I am creating a Todo app in JavaScript. I have a function that takes the input value(Task) and push it to an array of objects.
I want to be able to remove the object task out of the array listOfTask when button delete is clicked and I want to switch the completed property of task to true when button completed is clicked. My problem is that the user can click randomly any object in the array. So I can not link the event click to the object that I want to manipulate using index. Any ideas on how to achieve this will be highly appreciated. By the way, this is my fisrt time posting a question so please let me know if my question needs improvment or clarification.
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);
}
So the function appendTask() craetes two buttons per each task and print them into the 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)
}
}
At this point I am able to succesfully mark a task as completed and remove it from the HTML but I want to be able to manipulate the objects inside the array as well. Thank you!