I have a to do app with an edit button that edits the existing task. After editing the task, the value changes to a new edited task. However, it changes back to its old value upon creating a new task or refreshing. I tried setItem however it doesn't seem to work. Below is what i currently tried with the editItem() function.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div >
<div >
<div >TO-DO APP</div>
</div>
<div >
<div >CREATE A TO-DO</div>
</div>
<form id="todo-form">
<div >
<div >
<input name="newTask" type="text" placeholder="eg. Do the laundry">
</div>
</div>
<div >
<div >CATEGORY</div>
</div>
<div >
<div >
<input type="radio" name="category" id="option1" value="Work">
<label for="option1">Work</label>
</div>
<div >
<input type="radio" name="category" id="option2" value="Personal">
<label for="option2">Personal</label>
</div>
</div>
<div >
<div ><button type="submit" active>ADD TO-DO</button></div>
</div>
</form>
<div >
<div >TO-DO LIST</div>
</div>
<div >
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Javascript
const todoForm = document.getElementById("todo-form")
window.addEventListener("load", () => {
todos = JSON.parse(localStorage.getItem("todos")) || []
todoForm.addEventListener("submit", (e) => {
e.preventDefault()
if (e.target.elements.newTask.value != "") {
const todo = {
task: e.target.elements.newTask.value,
category: e.target.elements.category.value
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
e.target.reset()
showList()
}
})
showList();
})
function showList() {
let outPut = '';
let taskListShow = document.querySelector(".todoList")
const taskName = document.getElementsByClassName('todoContent')
todos.forEach((data, index)=> {
outPut = `
<div >
<div >
<input value="${data.task}" readonly>
</div>
<div >
<div >
<div >
<button type="button" onClick="editItem(${index})">Edit</button>
</div>
<div >
<button type="button" onClick="deleteItem(${index})">Delete</button>
</div>
</div>
</div>
</div>`
});
taskListShow.innerHTML = outPut;
}
function deleteItem(index) {
todos.splice(index, 1)
localStorage.setItem("todos", JSON.stringify(todos))
showList()
}
function editItem(index) {
const taskAllName = document.querySelectorAll(".todoContent");
const taskName = taskAllName[index];
taskName.removeAttribute("readonly");
taskName.focus();
taskName.addEventListener("blur", (e) => {
taskName.setAttribute("readonly", true);
taskName = e.target.value;
localStorage.setItem("todos", JSON.stringify(todos));
showList()
});
}
CodePudding user response:
All you have to do is when blur
event listener trigger then you have to change the value of the task
and add it into localStorage
and also assign it to todos
also:
taskName.addEventListener("blur", (e) => {
const newValue = e.target.value;
const newTodos = todos.map((todo, i) =>
i === index ? { ...todo, task: newValue } : { ...todo }
);
taskName.setAttribute("readonly", true);
localStorage.setItem("todos", JSON.stringify(newTodos));
todos = newTodos;
showList();
});