更新没有索引的数组

Question

我不确定如何在标题中准确表达这一点。我已经制作了一个待办事项列表，并且正在努力使待办事项可编辑。通过 displayTodo 函数，我已经能够使 DOM 中的 li 项可编辑，但我希望此更改反映在 todoList 数组中，如下所示好吧，当我点击保存按钮时。我不确定我将如何完成这项工作。我在考虑 splice 方法，但我不知道在这种情况下它会如何工作，因为我需要传入索引。

// Global Variables
const input = document.querySelector('.input');
const addBtn = document.querySelector('.add-btn');
const removeBtn = document.querySelector('.remove-btn');
const todos = document.querySelector('.todos');

// Event Listeners 
addBtn.addEventListener('click', addTodo);
removeBtn.addEventListener('click', removeTodo);

const todoList = [

]

function addTodo() {
  // Push user input to array
  let inputValue = input.value;
  todoList.push(inputValue);
  displayTodo();
  input.value = '';
  console.log(todoList);
}

function removeTodo() {
  let listItems = document.querySelectorAll('.todos li');
  // Remove last todo from array
  todoList.splice(-1, 1);
  // Remove last todo from ul
  todos.removeChild(listItems[listItems.length - 1]);
  //console.log(todoList);
}

function displayTodo() {
  // Create li and display it
  let newTodo = document.createElement('li');
  newTodo.textContent = input.value;
  todos.appendChild(newTodo);
  // Create edit button and display it
  let editButton = document.createElement('button');
  editButton.textContent = 'Edit';
  newTodo.appendChild(editButton);
  editButton.addEventListener('click', function() {
    // Create edit input and save button
    editButton.style.opacity = 0;
    editButton.style.visibility = 'hidden';
    let editInput = document.createElement('input');
    newTodo.appendChild(editInput);
    let saveButton = document.createElement('button');
    newTodo.appendChild(saveButton);
    saveButton.textContent = 'Save';
    saveButton.addEventListener('click', function() {
      newTodo.textContent = editInput.value;
      console.log(todoList);
    })
  });
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Todo List</title>
</head>

<body>
  <div class="container">
    <h1>Todo List</h1>
    <input class="input" type="text" placeholder="Add A Task" autocomplete="off" required>
    <button class="add-btn">Add Task</button>
    <button class="remove-btn">Remove Task</button>
    <ul class="todos">

    </ul>
  </div>
</body>

</html>

Answer 1

首先，在editButton.addEventListener('click', function() {}中获取需要编辑的<li>元素的文本内容。文本内容将单词 'Edit' 附加到列表元素，因此在第二行将其删除。使用 indexOf 属性.

获取数组元素全值的索引是 liValue

let liValue = newTodo.textContent;
liValue = liValue.replace('Edit', '');
let liIndex = todoList.indexOf(liValue);

在saveButton.addEventListener('click', function () {}中，更新DOM后，使用splice()更新数组列表。

todoList.splice(liIndex, 1, editInput.value);

我添加了完成更改的函数。必须添加的代码部分在下面注释。

editButton.addEventListener('click', function () {
    // Create edit input and save button
    editButton.style.opacity = 0;
    editButton.style.visibility = 'hidden';

    /* first part of the code starts here */
    let liValue = newTodo.textContent;
    liValue = liValue.replace('Edit', '');
    let liIndex = todoList.indexOf(liValue);
    /* first part of the code ends here */

    let editInput = document.createElement('input');
    newTodo.appendChild(editInput);
    let saveButton = document.createElement('button');
    newTodo.appendChild(saveButton);
    saveButton.textContent = 'Save';
    saveButton.addEventListener('click', function () {
        newTodo.textContent = editInput.value;

        /* second part of the code starts here */
        todoList.splice(liIndex, 1, editInput.value);
        /* second part of the code ends here */
    })
});

Link to codepen: https://codepen.io/geekyquentin/pen/LYQdjXw

更新没有索引的数组

Updating an array without index

html

javascript

css