Сохранить состояние флажка в обычном JS после запроса

Question

У меня есть простое приложение TODO, написанное на vanilla javascript. Вот приложение:

Проблема / проблема, с которой я сталкиваюсь на данный момент:

Когда я нажимаю кнопку «Создать задачу» , существующее проверенное состояние флажка исчезает.

Я не уверен, как сохранить состояние флажка после окна запроса OK click. Пожалуйста, найдите исходный код ниже.

 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 должен быть уникальным.