[英]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.