[英]Trying to edit button in a Javascript Todo List
我正在嘗試在 vanilla Javascript 中創建一個具有以下功能的待辦事項列表：
我正在嘗試添加編輯 function，請幫助我：
/*When user enter text in input field and click submit, an item should be added to the list 1. User enter text and click submit 2. When submit clicked, an item added to the list 3. When user click edit icon so, the list item is selected 4. Selected text should be editable */ const items = document.querySelectorAll('#list li'); const todoTextInput = document.getElementById('todoTextInput'); const submitBtn = document.getElementById('submit_todo'); const tabs = []; // const liIndex; //Add todo to the list submitBtn.addEventListener('click', () => { const todoText = document.getElementById('todoTextInput').value; const todoList = document.getElementById('list'); const todoItem = document.createElement('li'); todoItem.classList.add('list-group-item', 'd-flex', 'justify-content-between'); todoItem.innerHTML = ` <span>${todoText}</span> <span> <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a> </span> `; todoList.appendChild(todoItem); tabs.push(todoText); //Clearing input box todoTextInput.value = ''; const editBtn = document.getElementsByClassName('editBtn'); // Selecting item by clicking edit button for (let i = 0; i < editBtn.length; i++) { editBtn[i].addEventListener('click', editItem); } const deleteBtn = document.getElementsByClassName('deleteBtn'); //Selecting item by clicking delete button for (let i = 0; i < deleteBtn.length; i++) { deleteBtn[i].addEventListener('click', deleteItem); }; }); //Deleting selected item function deleteItem() { console.log("Deleted") this.parentNode.parentNode.remove(); } //Editing selected item function editItem() { const todoTextVal = this.parentNode.parentNode.firstElementChild.innerHTML; const liIndex = tabs.indexOf(todoTextVal); todoTextInput.value = todoTextVal; console.log(todoTextVal + "Index -"+ liIndex); tabs[liIndex].innerHTML = todoTextInput.value; for (let i = 0; i < items.length; i++) { tabs.push(items[i].innerHTML); }; }
<,DOCTYPE html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" /> <link rel="stylesheet" href="./style,css"> <script src=",/todo.js" defer></script> <title>Hello, world:</title> </head> <body> <div class="container"> <div class="form-group form-inline"> <input type="text" name="todoTextInput" id="todoTextInput" class="form-control"> <button type="submit" class="btn btn-outline-success m-2" id="submit_todo">Add Todo</button> </div> <ul class="list-group" id="list"> <.-- <li class="list-group-item d-flex justify-content-between"> <span>Apple</span> <span> <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a> </span> </li> <li class="list-group-item d-flex justify-content-between"> <span>Mango</span> <span> <a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> <a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a> </span> </li> --> </ul> </div> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code:jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs:cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
我建議使用谷歌 firebase > Firestore 你可以在你的網站中使用香草 javascript。 有了它，您可以創建一個小型數據庫，您可以在其中讀取數據或向其中寫入數據，以便保存所有內容！
您可以在此處查看 google firestore 文檔。
我的 EDIT 按鈕無法正常工作？ (Javascript 待辦事項列表) 初學者
[英]My EDIT button is not working properly? (Javascript Todo List) Beginner
JavaScript 待辦事項列表 - 當我單擊“編輯”按鈕時，它不顯示能夠更改待辦事項的輸入
[英]JavaScript Todo List - When I click 'edit' button, it doesn't show input to be able to change a todo
JavaScript Todo List-當我單擊“編輯”按鈕時，它選擇了錯誤的文本輸入，但仍編輯正確的項目
[英]JavaScript Todo List - When I click 'edit' button, it selects the wrong text input, but still edits the correct item
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.