提示后在純JS中保持復選框狀態

Question

我有一個用香草javascript編寫的簡單TODO應用。 這是應用程序：

我目前遇到的問題/問題是：

當我單擊“新建待辦事項”按鈕時，復選框的現有選中狀態消失。

我不確定在提示窗口OK單擊后如何保持復選框狀態。 請在下面找到源代碼。

 const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const checkbox = document.createElement( "input" ); 
checkbox.type = "checkbox" 
checkbox.id = classNames.TODO_CHECKBOX 

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  let newTodo = prompt("Please enter a todo item");
  if(newTodo){ 
    itemCountSpan.innerHTML = parseInt(itemCountSpan.innerHTML) + 1
    list.append(checkbox)
    list.innerHTML += "<li>" + newTodo 
  }

  let allCheckBoxes = document.querySelectorAll("input[id='todo-checkbox']");
  uncheckedCountSpan.innerHTML = allCheckBoxes.length
  console.log(allCheckBoxes.length)


  for(let i = 0; i < allCheckBoxes.length; i++){
  allCheckBoxes[i].onclick = function() {
    if ( this.checked ) {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) - 1
    } 
    else {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
    }
  };
  }
}

如果您有任何想法/方向，請告訴我。

提前致謝。

Answer 1

您有兩個問題：首先，您每次都附加相同的復選框。 其次，您正在直接編輯innerHTML，這將迫使DOM重新呈現所有內容，還原輸入的狀態。 這是我的處理方式：

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

function newTodo() {
  let newTodo = prompt("Please enter a todo item");
  if(!newTodo){
    return
  }
  itemCountSpan.innerHTML = parseInt(itemCountSpan.innerHTML) + 1
  uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
  const checkbox = document.createElement( "input" ); 
  checkbox.onclick = function() {
    if ( this.checked ) {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) - 1
    } 
    else {
      uncheckedCountSpan.innerHTML = parseInt(uncheckedCountSpan.innerHTML) + 1
    }
  };
  checkbox.type = "checkbox" 
  checkbox.class = classNames.TODO_CHECKBOX 
  list.append(checkbox)
  const listItem = document.createElement("li")
  listItem.innerHTML = newTodo
  list.append(listItem)
}

請注意，我也換成了id復選框的一個class -有多個復選框，並id S的關系是唯一的。