How do I implement/execute where in once I click the edit button it will allow the user to input a value then once submitted, the text in the li will render the updated value.

JS code block is written below:

P.S. You can ignore the other functions that are irrelevant. P.S. Yes I know, the editTask is incomplete but I'm not exactly sure how to implement the functionality I mentioned above.

const alertMsg = document.querySelector('.alert-message');
const inputForm = document.querySelector('.input-section');
const todoInput = document.querySelector('.todo-input');
const addBtn = document.querySelector('.add-btn');
const taskActions = document.querySelector('.task-actions');
const todosList = document.querySelector('.todos-list');
const deleteAllBtn = document.querySelector('.delete-all-btn');
const savedTodos = localStorage.getItem('todos');

let todos = [];

function displayTodos(newTodoObj){
    const li = document.createElement('li');
    li.id = newTodoObj.id;
    li.className = 'task-container'

    const task = document.createElement('span');
    const checkBtn = document.createElement('button')
    const editBtn = document.createElement('button')
    const deleteBtn = document.createElement('button')

    task.innerText = newTodoObj.text;
    checkBtn.innerText = 'Check'
    editBtn.innerText = 'Edit';
    deleteBtn.innerText = 'Del';

    checkBtn.addEventListener('click', (event) => {
        const task = event.target.parentElement;
        console.log(task);
        task.classList.toggle('completed');
    })

    editBtn.addEventListener('click', editTask)
    deleteBtn.addEventListener('click', deleteTask)

    li.appendChild(task);
    li.appendChild(checkBtn);
    li.appendChild(editBtn);
    li.appendChild(deleteBtn);

    todosList.appendChild(li);
}


function editTask(event){
    const li = event.target.parentElement.children[0].innerText;
    todoInput.value = li;    
}

function deleteTask(event){
    const li = event.target.parentElement;

    li.remove();
    todos = todos.filter((todo) => todo.id !== parseInt(li.id));
    saveTodos();
}

function handleTodoSubmit(event){
    event.preventDefault();
    const newTodo = todoInput.value;
    todoInput.value = '';
    const newTodoObj = {
        text: newTodo,
        id: Date.now(),
        checked: false
    };
    todos.push(newTodoObj);
    displayTodos(newTodoObj);
    saveTodos();
}

function saveTodos(){
    localStorage.setItem('todos', JSON.stringify(todos));
}

inputForm.addEventListener('submit', handleTodoSubmit);

if(savedTodos !== null){
    const parsedTodos = JSON.parse(savedTodos);
    parsedTodos.forEach(displayTodos);
}

window.addEventListener('beforeunload', saveTodos);

CodePudding user response：

This code adds an input element to the DOM when the "Edit" button is clicked, sets its value to the text of the task, and adds an event listener that listens for the "Enter" key. When the "Enter" key is pressed, the code updates the text of the task and replaces the input element with a span element containing the updated text. It also updates the todos array and saves the updated array to local storage.

function editTask(event){
    const li = event.target.parentElement;
    const task = li.children[0];
    const input = document.createElement('input');
    input.value = task.innerText;
    li.replaceChild(input, task);
    input.focus();
    input.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            const newTask = document.createElement('span');
            newTask.innerText = input.value;
            li.replaceChild(newTask, input);
            const todoIndex = todos.findIndex((todo) => todo.id === parseInt(li.id));
            todos[todoIndex].text = newTask.innerText;
            saveTodos();
        }
    });
}

You can use this code in your existing JavaScript file by replacing the current editTask function with this one.

I don't know if I understood your question very well, but I hope it will at least help guide you. Or maybe it is the complete solution. Best wishes!