I tried creating an edit button for editing a created task, and it works for the very first task that i create.

1. However for subsequent tasks, the edit button for the respective tasks focus on editing the input on my first task again.

2. For every new task created, it changes the first task back to the very first original task that was written.

   To-Do List

    <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>
   

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.querySelector(".todoContent")

    todos.forEach((data, index)=> {

        outPut  = `
        <div >
            <div >
                <input  value="${data.task}" readonly>
            </div>
            <div >
                <div >
                    <div >
                        <button type="button"  onClick="editItem()">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() {
    const taskName = document.querySelector(".todoContent")
    taskName.removeAttribute('readonly')
    taskName.focus()
    taskName.addEventListener("blur", (e) => {
        taskName.setAttribute('readonly', true)
        taskName = e.target.value
        localStorage.setItem('todos', JSON.stringify(todos))
        showList()
    })
}

I am new to javascript and hope to get help on this! thank you

CodePudding user response：

Since all of the input class will have todoContent and when you look for a class using querySelector then JS will return you the first matching element with class todoContent.

const taskName = document.querySelector(".todoContent")

CODESANDBOX LINK

What you can do is look for all of the element with class todoContent and then take the particular input on which you have clicked by using the index of the clicked edit button as:

function editItem ( index ) {  // RECEVIVE INDEX
const taskAllName = document.querySelectorAll( ".todoContent" );
const taskName = taskAllName[index];  // USE SPECIFC ELEMENT

So you have to pass the index to function editItem as:

onClick="editItem(${index})">Edit</button>