如何通过用户输入更新数组中对象的值？-解网

问：

我如何实现/执行，一旦我单击编辑按钮，它将允许用户输入一个值，然后在提交后，文本中的文本将呈现更新的值？li

JS代码块写得如下：

P.S. 您可以忽略其他不相关的功能。 P.S. 我知道，这是不完整的，但我不太确定如何实现我上面提到的功能。edittask

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

JavaScript 数组 DOM 事件

此代码在单击“编辑”按钮时向 DOM 添加一个输入元素，将其值设置为任务文本，并添加一个侦听“Enter”键的事件侦听器。当按下“Enter”键时，代码将更新任务的文本，并将输入元素替换为包含更新文本的 span 元素。它还更新 todos 数组，并将更新的数组保存到本地存储。

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

您可以通过将当前 editTask 函数替换为此函数，在现有 JavaScript 文件中使用此代码。

我不知道我是否很好地理解了你的问题，但我希望它至少能帮助你。或者，也许它是完整的解决方案。愿你安好！

上一个：我可以从 DOM 触发 Phaser 3 事件吗？

下一个：使用 addEventListener 和函数时避免重复代码的最佳方法

如何通过用户输入更新数组中对象的值？

How do I updated an object's value inside an array through user input?

评论