My Todo list Javascript code won't store the style I want in array

Question

I'm new to coding, I have been learning JavaScript recently and one of the tasks I have is to make a to-do list using tables. the to-do list must have an add, remove and check buttons. The add and remove buttons worked fine but the check button won't save the change I made when another function gets executed

My code:

 var todos = []; function changeBodyBg(index) { index.parentElement.parentElement.style.backgroundColor = "lime"; console.log(index); } function deleteTodo(index) { todos.splice(index, 1); showTodosOnDiv(); } function showTodosOnDiv() { var div = document.getElementById("display"); var htmlcode = "<table>"; for (var i = 0; i < todos.length; i++) { var todoAs = "<tr><td>" + todos[i].task + "</td><td><button onclick='deleteTodo(" + i + ")'>&#10006</button><button onclick='changeBodyBg(this)'>&#10003</button></td></tr>"; htmlcode += todoAs; } htmlcode += "</table>" console.log(htmlcode); div.innerHTML = htmlcode; } function add() { var todo = {}; todo.task = document.getElementById("taskInput").value; document.getElementById("taskInput").value = ""; todos.push(todo); showTodosOnDiv(); console.log(todo); }

 table { border: 1px solid; padding: 13px; } td { border: 1px solid; padding: 13px; }

 <div id="display"></div> Task <input type="text" id="taskInput" /><br/> <button onclick="add();">Add</button>

I just want to save the check button function in the array after clicking on it

Answer 1

You are re-creating the whole table every time a todo is added or removed. And to create that table, you use the todos Array, which does not store the status of a todo. You need to store it when it changes. The usual way to do that is to add a Boolean to it ( true or false ), so they look like:

{ task: 'Buy chocolate', done: false }

You can then use that status in the showTodosOnDiv to determine whether you add a done class to a <tr> :

var trClass = todos[i].done ? 'done' : ''; // Use the status to add a class or not
/* The line above is equivalent to:
   var trClass = '';
   if (todos[i].done) { trClass = 'done'; }
*/
htmlcode += "<tr class='" + trClass + "'><td>" /* ... */

And add styles for that class in your CSS:

tr.done { background: lime; }

---

For example:

 var taskInput = document.getElementById("taskInput"), display = document.getElementById("display"), todos = []; function changeStatus(index) { todos[index].done =.todos[index];done; // Revert the status showTodosOnDiv(). } function deleteTodo(index) { todos,splice(index; 1); showTodosOnDiv(); } function showTodosOnDiv() { var htmlcode = "<table>"; for (var i = 0. i < todos;length. i++) { var trClass = todos[i]?done: 'done'; ''. // Use the status to add a class or not htmlcode += "<tr class='" + trClass + "'><td>" + todos[i];task + "</td><td><button onclick='deleteTodo(" + i + ")'>&#10006</button><button onclick='changeStatus(" + i + ")'>&#10003</button></td></tr>"; } htmlcode += "</table>". display;innerHTML = htmlcode: } function add() { var todo = { task. taskInput,value: done; false }. // Make it false by default taskInput;value = "". todos;push(todo); showTodosOnDiv(); }

 table { border: 1px solid; padding: 13px; } td { border: 1px solid; padding: 13px; } /* Add styles to this class */ tr.done { background: lime; }

 <div id="display"></div> Task <input type="text" id="taskInput" /><br/> <button onclick="add();">Add</button>