Question

我正在使用香草JavaScript开发“待办事项列表”应用。到目前为止，我已经成功实现了一个函数来渲染通过输入提交的任务。但是，每当我添加新任务时，该任务就会与我之前提交的所有任务一起添加。例如[1]，[1,2]，[1,2,3] 我无法发现问题。我该如何解决该错误，为什么会发生？

const todoBlock = document.querySelector('.task__nav');
const submitForm = document.querySelector('.form');
const taskItem = document.querySelector('.task');

const taskContainer = document.querySelector('.todo__container');

const showAllTasksNav = document.querySelector('.task__nav-item.all');
const showCompletedTasksNav = document.querySelector('.task__nav-item.finished');


console.log(showAllTasksNav, showCompletedTasksNav)

taskContainer.addEventListener('click', (event) => {

  const target = event.target;
  const id = target.parentNode.parentNode.parentNode.dataset.key;

  if(target.classList.contains('ion-ios-checkmark-outline')) {
    toggleTodo(id);
  } else if (target.classList.contains('ion-ios-close-outline')) {
    console.log('Delete Btn')
  }
})

let todoList = [];
todoList = JSON.parse(localStorage.getItem("todolist")) || [];
updateUI();

function addTodo(task) {

  const todo = {
    task: taskItem.value,
    isCompleted: false,
    id: Date.now()
  };

  todoList.push(todo);
  localStorage.setItem('todolist', JSON.stringify(todoList));

  updateUI();

}

function updateUI() { 
  todoList.forEach(el => {
    showEntry(el.id, el.task);
  })
}

function showEntry(id, task) {

  const markup = `
  <div class="todo__item" data-key=${id}>
    <p>${task}</p>
    <div class="icons">
        <button class="item__complete--btn"><svg class="ion-ios-checkmark-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M340.1 177.3L215.3 303l-47.2-47.2-17.8 17.8 56 56c2.5 2.5 5.9 4.5 8.9 4.5s6.3-2 8.8-4.4l133.7-134.4-17.6-18z" fill="#626262"/><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 398.7c-105.1 0-190.7-85.5-190.7-190.7 0-105.1 85.5-190.7 190.7-190.7 105.1 0 190.7 85.5 190.7 190.7 0 105.1-85.6 190.7-190.7 190.7z" fill="#626262"/></svg></button>
        <button class="item__delete--btn"><svg class="ion-ios-close-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M403.1 108.9c-81.2-81.2-212.9-81.2-294.2 0s-81.2 212.9 0 294.2c81.2 81.2 212.9 81.2 294.2 0s81.2-213 0-294.2zm-12.3 281.9c-74.3 74.3-195.3 74.3-269.6 0-74.3-74.3-74.3-195.3 0-269.6s195.3-74.3 269.6 0c74.4 74.3 74.4 195.3 0 269.6z" fill="#626262"/><path d="M340.2 160l-84.4 84.2-84-83.8-11.8 11.8 84 83.8-84 83.8 11.8 11.8 84-83.8 84.4 84.2 11.8-11.8-84.4-84.2 84.4-84.2z" fill="#626262"/></svg></button>
    </div>
  </div>
  `;

  todoBlock.insertAdjacentHTML('afterend', markup);
}

submitForm.addEventListener('submit', (event) => {
  event.preventDefault();
  if(taskItem.value !== '') {
    addTodo(taskItem.value) 
    clearInput()
  }
});

function clearInput() {
  taskItem.value = '';
}

function toggleTodo(key) {

  const index = todoList.findIndex(item => item.id === Number(key));

  todoList[index].isCompleted = !todoList[index].isCompleted;

  const item = document.querySelector(`[data-key="${key}"]`);
  if(todoList[index].isCompleted) {
      item.classList.add('completed')
  } else {
    item.classList.remove('completed');
  }
}

function deleteTodo() {

}

showAllTasksNav.addEventListener('click', displayAllTasks);
showCompletedTasksNav.addEventListener('click', displayCompletedTask);

function displayCompletedTask() {
  todoList.forEach(el => {

    if(el.isCompleted === true) {
      showEntry(el.id, el.task);
    }

  });
}

function displayAllTasks() {

}

<div class="wrapper">
        <h1>To Do List</h1>
            <div class="input__area">
                <form class="form">
                    <input class="task" type="text" placeholder="Enter a task">
                    <input class="add" type="submit" value="ADD">
                </form>
            </div>

        <div class="todo__container">
            <ul class="task__nav">
                <li class="task__nav-item all">All Tasks</li>
                <li class="task__nav-item finished">Finished Tasks</li>
            </ul>
        </div>
    </div>

Answer 1

问题在函数updateUI（）中。调用此函数时，所有项目都将附加到containter元素。它需要一个解决方法-在调用添加元素之前，从所有先前添加的元素中清除容器元素。

一个建议可以使任务更轻松：在具有类todo__container的元素中添加新元素，该元素应用作元素的容器。它将使工作更加轻松。

数据无法正确显示

1 个答案: