In viedo, input item “to Do” again at 3:54, the old “to Do” disappears. But It’s not disappeared in my project
so I looked carefully my code…
const toDoForm = document.querySelector("#todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.querySelector("#todo-list");
const TODOS_KEY = "todos";
const toDos = [];
function saveToDos(){
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event){
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newToDo){
const li = document.createElement("li");
const button = document.createElement("button");
const span = document.createElement("span");
span.innerText = newToDo;
button.innerText = "✔";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
toDos.push(newToDo);
saveToDos();
}
function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value="";
paintToDo(newToDo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const saveToDo = localStorage.getItem(TODOS_KEY);
if (saveToDo !== null){
const parsedToDos = JSON.parse(saveToDo);
parsedToDos.forEach(paintToDo);
}
then I found that
toDos.push(newToDo);
saveToDos();
they should exist in ‘function paintToDo’ not a ‘function handleToDoSubmit’
In video, input new item in array on web => disappeared old item in array
When I did with my code, old item still exist in array with new item
I want understand why it’s not occur error and how it’s changed result in according to different of video and my code
anyone can help this?
please help meㅠㅠ