javascript - 提示后在纯 JS 中保留复选框状态

Question

我有一个用普通 JavaScript 编写的简单 TODO 应用程序。这是应用程序:

我目前遇到的问题是:

当我单击“新建待办事项”按钮时复选框的现有选中状态消失。

我不确定如何在提示窗口确定单击后保留复选框状态。请在下面找到源代码。

 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)
}

请注意，我还用 class 替换了复选框的 id - 有多个复选框，并且 id 应该是唯一的。