我的待辦事項列表 Javascript 代碼不會將我想要的樣式存儲在數組中

Question

我是編碼新手，我最近一直在學習 JavaScript，我的任務之一是使用表格制作待辦事項列表。 待辦事項列表必須有添加、刪除和檢查按鈕。 添加和刪除按鈕工作正常，但檢查按鈕不會保存我在執行另一個 function 時所做的更改

我的代碼：

 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>

我只想在單擊后將檢查按鈕 function 保存在數組中

Answer 1

每次添加或刪除待辦事項時，您都在重新創建整個表。 要創建該表，請使用todos數組，它不存儲待辦事項的狀態。 當它發生變化時，您需要存儲它。 通常的方法是添加一個 Boolean 到它（ true或false ），所以它們看起來像：

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

然后，您可以在showTodosOnDiv中使用該狀態來確定是否將done class 添加到<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>" /* ... */

並在 CSS 中為 class 添加 styles：

tr.done { background: lime; }

---

例如：

 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>