My EDIT button is not working properly? (Javascript Todo List) Beginner
Question
I am a beginner in Javascript and is currently trying to make a todo list web app. 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. 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 answers
solution1
0 2021-04-09 17:14:06
Have you considered trying Node.ReplaceChild() instead of creating a new element? 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
solution2
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.