简体   繁体   English

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

[英]Displaying array on page, getting duplicated results - JavaScript

I am making a simple to do app and am stuck on updating the data array when a new task is added.我正在制作一个简单易用的应用程序,并且在添加新任务时坚持更新数据数组。 Right now, if you add a new task, the entire array re-populates on the display and duplicate values are listed.现在,如果您添加一个新任务,整个数组将重新填充在显示屏上并列出重复的值。 How do I resolve this so that only one iteration of the array displays any time it is updated on the page?我如何解决这个问题,以便每次在页面上更新时只显示数组的一次迭代?

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();

You should not iterate on the whole array each time a task is added.每次添加任务时,您都不应该遍历整个数组。 Just create an element for the new task.只需为新任务创建一个元素。 Only in on load iterate over the array.仅在加载时迭代数组。

// 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));

maybe you need these couple of lines - delete what is already there and then update也许你需要这两行 - 删除已经存在的内容然后更新

// 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");
  ...

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM