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>

question from:https://stackoverflow.com/questions/65870316/my-todo-list-javascript-code-wont-store-the-style-i-want-in-array

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>