Trouble saving edited task into local browser storage-CodePudding

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:

CODESANDBOX LINK

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