我的 javascript、html 和 css 也沒有做我想做的事。 我可以請我的待辦事項列表應用程序的一些幫助

Question

我的目標是修復我擁有的代碼，以便在我添加待辦事項時

當我添加一個待辦事項時，我得到一個刪除線 當我單擊該項目的單選按鈕以顯示我已完成時，我只想要一個刪除線

它是一個小型 git

任何幫助將不勝感激[https://github.com/breakfireaus/todo-list.git][1]

Answer 1

問題是，您想根據待辦事項的 state 修改輸入文本。 我將解釋如何做你想做的事情。 其他一切都取決於你。

1. 刪除注釋行，因為您需要動態設置刪除線樣式；
2. 添加單獨的 class 用於刪除線樣式；

.todo-item .todo-content input {
    /* text-decoration: line-through; */
    color: var(--grey);
}

.strikethroughStyle{
    text-decoration: line-through;
}

3. 刪除注釋掉的代碼，因為它永遠不會像你期望的那樣運行，因為你在任何一種方式之后都重新繪制了待辦事項；

4. 向 DisplayTodos function 添加文本裝飾操作，如下所示；

const textToStrikeThrough = todoItem.querySelector(".todo-content").querySelector("input");
if (todo.done) {
    todoItem.classList.add('done');
    textToStrikeThrough.classList.add("strikethroughStyle");
} else {
    textToStrikeThrough.classList.remove("strikethroughStyle");
}

不客氣。