编辑按钮的麻烦做应用程序JavaScript

Question

我尝试创建一个编辑按钮来编辑已创建的任务，它适用于我创建的第一个任务。

1. 然而，对于后续任务，各自任务的编辑按钮专注于编辑我的第一个任务的输入。

2. 对于每个新创建的任务，它将第一个任务更改回最初写入的第一个原始任务。

   待办事项列表

   <div class="container">
   <div class="row mb-5">
   <div class="col h1 text-white text-start text-center text-md-start text-lg-start">TO-DO APP</div>
   </div>
   <div class="row">
   <div class="h6 text-white text-start text-center text-md-start text-lg-start">CREATE A TO-DO</div>
   </div>
   <form id="todo-form">
   <div class="row mb-4">
   <div class="col">
   <input class="form-control" name="newTask" type="text" placeholder="eg. Do the laundry"> 
   </div>     
   </div>
   <div class="row">
   <div class="h6 text-white text-start text-center text-md-start text-lg-start">CATEGORY</div>
   </div>
   <div class="row mb-3">
   <div class="col-6">
   <input type="radio" class="btn-check" name="category" id="option1" value="Work">
   <label class="col-12 btn btn-outline-danger p-4 text-white work-task" for="option1">Work</label>
   </div>
   <div class="col-6">
   <input type="radio" class="btn-check" name="category" id="option2" value="Personal">
   <label class="col-12 btn btn-outline-primary p-4 text-white personal-task" for="option2">Personal</label>
   </div>
   </div>
   <div class="row mb-4">
   <div class="col"><button type="submit" class="btn btn-secondary p-2 w-100 add-task" active>ADD TO-DO</button></div>
   </div>
   </form>
   <div class="row mb-2">
   <div class="h6 text-white text-start text-center text-md-start text-lg-start">TO-DO LIST</div>
   </div>
   <div class="todoList">
   </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 class="row todoList mb-3">
<div class="col-10 col-lg-8 col-md-7 col-sm-6">
<input class="todoContent no-border text-white text-center" value="${data.task}" readonly>
</div>
<div class="col">
<div class="row action">
<div class="col-6">
<button type="button" class="btn btn-secondary col-12" onClick="editItem()">Edit</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-danger col-12" 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()
})
}

如何使它工作?

Answer 1

由于所有的输入class将具有todoContent，当您使用querySelector寻找类时，JS将返回第一个与todoContent类匹配的元素。

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

CODESANDBOX LINK

你可以做的是查找所有类为todoContent的元素，然后通过使用已单击的edit button的index来获取您已单击的特定输入:

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

因此，您必须将index传递给editItem函数:

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