我的 EDIT 按钮无法正常工作？ (Javascript 待办事项列表) 初学者
[英]My EDIT button is not working properly? (Javascript Todo List) Beginner
问题描述
I am a beginner in Javascript and is currently trying to make a todo list web app.
我是 Javascript 的初学者，目前正在尝试制作一个待办事项列表 web 应用程序。 But currently stucked at the edit button.但目前停留在编辑按钮上。
As you can see, I wanted to make an editable checklist but somehow everytime I hit the edit button, a new input comes out instead of replacing the current one.如您所见，我想制作一个可编辑的清单，但不知何故，每次我点击编辑按钮时，都会出现一个新的输入而不是替换当前的输入。 It also removes the 'checkbox' somehow.它还以某种方式删除了“复选框”。
Can anyone tell me where I did wrong?谁能告诉我我哪里做错了？ Thank you for your time!感谢您的时间！
Somehow the edit button doesn't work at all when I try to run it on VSCode.不知何故，当我尝试在 VSCode 上运行它时，编辑按钮根本不起作用。 Here it works, but not as I wanted though.在这里它有效，但不是我想要的。
const ul = document.querySelector('#invitedList'); ul.addEventListener('click', (event) => { if(event.target.tagName === 'BUTTON') { const button = event.target; const li = button.parentNode; if(button.textContent === 'edit') { const span = li.firstElementChild; const input = document.createElement('input'); input.type = 'text'; input.value = span.textContent; li.insertBefore(input, span); li.removeChild(span); button.textContent = 'save'; } else if(button.textContent === 'save') { const input = li.firstElementChild; const span = document.createElement('span'); span.textContent = input.value; li.insertBefore(span, input); li.removeChild(input); button.textContent = 'edit'; } } });
<,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"> <title>Document</title> <script src="test,js"></script> </head> <body> <!-- TASK LIST THAT IS SUPPOSED TO BE EDITABLE GOES DOWN HERE, AS A TEMPLATE --> <div id="taskit" class="task"> <ul id="invitedList"> <input type="checkbox"/> <label> <span id="editable" class="custom-checkbox">Edit This</span> </label> <button type="submit" id="editbtn">edit</button> </ul> </div> </body> </html>
2 个解决方案
解决方案1
0 2021-04-09 17:14:06
Have you considered trying Node.ReplaceChild() instead of creating a new element?您是否考虑过尝试 Node.ReplaceChild() 而不是创建新元素？ Not sure how to tell you exactly how to do it but here is a link to the documentation:不知道如何确切地告诉您如何操作，但这里是文档的链接：
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
解决方案2
0 2021-04-09 17:34:01
I'd suggest to change styling instead of creating and removing elements.我建议更改样式而不是创建和删除元素。 Here is possible solution:这是可能的解决方案：
let isEditState = false; const editButton = document.querySelector('#editbtn'); editButton.addEventListener('click', (event) => { const span = document.querySelector('#editable'); const checkbox = document.querySelector('#checkbox'); const text = document.querySelector('#text'); if (isEditState) { span.innerText = text.value; checkbox.style.display = 'inline'; text.style.display = 'none'; editButton.innerText = 'edit'; } else { checkbox.style.display = 'none'; text.style.display = 'inline'; editButton.innerText = 'save'; } isEditState =;isEditState; });
<,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"> <title>Document</title> </head> <body> <div id="taskit" class="task"> <ul id="invitedList"> <input type="checkbox" id="checkbox"/> <input type="text" id="text" style="display: none"/> <label> <span id="editable" class="custom-checkbox">Edit This</span> </label> <button type="submit" id="editbtn">edit</button> </ul> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.