I'm creating a todo app in vanilla JavaScript.
I'm storing the id and the value of each todo in local storage. As well as a boolean value specifying whether the corresponding checkbox of the todo was checked or not.
This works perfectly as long as no checkboxes have been clicked.
Here is an example of what local storage looks like -
"{\"toDo1630557891826\":\"Clean bedroom false\",\"toDo1630557898808\":\"Wash dishes false\"}"
As soon as a checkbox is checked, however, the latest value in the DOM tree gets placed next to both todo id's in local storage. E.g. when I check both checkboxes in the DOM.
This is what I mean -
{ToDos: "{\"toDo1630557891826\":\"Wash dishes true\",\"toDo1630557898808\":\"Wash dishes true\"}", length: 1}
I think the reason this is happening is because when I'm storing the checked todo values, I'm only retrieving the latest todo value in the DOM -
toDoContainer.addEventListener("change", (e) => {
const tgt = e.target;
const toDo = tgt.parentNode.querySelector('.input');
if (tgt.checked) {
toDo.style.textDecoration = "line-through";
toDo.style.opacity = "50%";
isChecked(toDo.value);
}
else {
toDo.style.textDecoration = "none";
toDo.style.opacity = "100%";
isChecked(toDo.value);
}
});
This line of code specifically is causing this problem -
const toDo = tgt.parentNode.querySelector('.input');
As I said before, this is getting the latest .input (todo) value. I need to store the corresponding value for each checked checkbox without overwriting other todo values in local storage.
So, I need to somehow store the value of each todo by accessing the todo value sibling of the checkbox.
I'm not sure how to do this.
Here is my codepen for more context. Of course there's no local storage though-
You likely need to consider this:
toDoContainer.addEventListener("change", (e) => {
const tgt = e.target;
const chk = tgt.checked;
toDo.style.textDecoration = chk ? "line-through" : "none";
toDo.style.opacity = chk ? "50%" : "100%";
saveTodos()
});
const saveToDos = () => {
// change the global todo object (and make it an array)
toDos = [...toDoContainer.querySelectorAll("input[type=checkbox]")].map(todo => {
const checked = todo.checked
const id = todo.closest("div").id;
return { id,completed:checked }
});
localStorage.setItem("ToDos", JSON.stringify(toDos));
};