在页面上显示数组，得到重复的结果 - JavaScript

Question

我正在制作一个简单易用的应用程序，并且在添加新任务时卡在更新数据数组上。现在，如果您添加一个新任务，整个数组将重新填充在显示屏上并列出重复的值。我该如何解决这个问题，以便每次在页面上更新时只显示数组的一次迭代？

const completedDivs = document.getElementById("completed");
const taskDivs = document.getElementById("tasks");
const addBtn = document.querySelector(".fa-plus");
const input = document.getElementById("newTask");

// SET UP DEFAULT TO DO TASKS
let todos = [
  { completed: false, task: "Make Coffee", id: 1 },
  { completed: false, task: "Walk the dog", id: 2 },
  { completed: true, task: "Make calculator app", id: 3 },
];

// SET UP REQUIRED VARIABLES
let taskNo = (completedDivsLength + taskDivsLength) + 1;

// MAP OUT DEFAULT TASKS TO DISPLAY
function generateToDo() {
  todos.map(todo => {
    // CREATE A NEW DIV
    let newTask = document.createElement("div");
  
    // GIVE THE DIV AN ID
    newTask.id = `div${taskNo}`;
    
    
    if(todo.completed) {
      // FORMAT THE DIV
      newTask.innerHTML = `<input type="checkbox" id="task${taskNo}" checked>
      <label for="task${taskNo}">${todo.task}</label>
      <i class="far fa-trash-alt" id="trash${taskNo}"></i>`
      
      // Check the item off the list
      newTask.classList.add("checked");
      // Add the task to the completed list
      completedDivs.appendChild(newTask);
    } else if (!todo.completed) {
      // FORMAT THE DIV
      newTask.innerHTML = `<input type="checkbox" id="task${taskNo}">
      <label for="task${taskNo}">${todo.task}</label>
      <i class="far fa-trash-alt" id="trash${taskNo}"></i>`
      
      // Uncheck the task from the list
      newTask.classList.remove("checked");
      // Move the task to the To Do list
      taskDivs.appendChild(newTask);
    }
  
    // INCREMENT THE TASK NO BY 1
    taskNo++;
  });
}

// ADD NEW TASKS
addBtn.addEventListener("click", () => {
  todos.push({ completed: false, task: `${input.value}`, id: taskNo });
  generateToDo();
  // RESET THE INPUT FIELD TO NOTHING
  input.value = "";
});

// AUTOMATICALLY LOAD THE DEFAULT TO DOS
window.onload = generateToDo();

Answer 1

您不应在每次添加任务时都对整个数组进行迭代。只需为新任务创建一个元素。仅在加载时迭代数组。

// MAP OUT DEFAULT TASKS TO DISPLAY
function generateToDo(todo) {

    // CREATE A NEW DIV
    let newTask = document.createElement("div");
  
    // GIVE THE DIV AN ID
    newTask.id = `div${taskNo}`;
    
    
    if(todo.completed) {
      // FORMAT THE DIV
      newTask.innerHTML = `<input type="checkbox" id="task${taskNo}" checked>
      <label for="task${taskNo}">${todo.task}</label>
      <i class="far fa-trash-alt" id="trash${taskNo}"></i>`
      
      // Check the item off the list
      newTask.classList.add("checked");
      // Add the task to the completed list
      completedDivs.appendChild(newTask);
    } else if (!todo.completed) {
      // FORMAT THE DIV
      newTask.innerHTML = `<input type="checkbox" id="task${taskNo}">
      <label for="task${taskNo}">${todo.task}</label>
      <i class="far fa-trash-alt" id="trash${taskNo}"></i>`
      
      // Uncheck the task from the list
      newTask.classList.remove("checked");
      // Move the task to the To Do list
      taskDivs.appendChild(newTask);
    }
  
    // INCREMENT THE TASK NO BY 1
    taskNo++;
}

// ADD NEW TASKS
addBtn.addEventListener("click", () => {
  const newTodo = { completed: false, task: `${input.value}`, id: taskNo };
  todos.push(newTodo);
  generateToDo(newTodo);
  // RESET THE INPUT FIELD TO NOTHING
  input.value = "";
});

// AUTOMATICALLY LOAD THE DEFAULT TO DOS
window.onload = todos.forEach( todo => generateToDo(todo));

Answer 2

也许您需要这两行 - 删除已有的内容然后更新

// MAP OUT DEFAULT TASKS TO DISPLAY
function generateToDo() {

    [].forEach.call(completedDivs.children,(x)=>x.remove());
    [].forEach.call(taskDivs.children,(x)=>x.remove());


  todos.map(todo => {
    // CREATE A NEW DIV
    let newTask = document.createElement("div");
  ...

在页面上显示数组，得到重复的结果 - JavaScript

Displaying array on page, getting duplicated results - JavaScript

javascript

arrays

addeventlistener

array.prototype.map