Vanilla JavaScript toggle element with text to editable element on edit button click

Question

I'm trying to make my first vanilla JavaScript app which is (surprisingly:D) To-Do App I'm currently stuck with the update todo part, I got this part of code doing to-do creation

let createTodo = (todo) => {
  let span = document.createElement('span');
  span.classList.add('text');
  spanParent.prepend(span);
  span.innerHTML += `${todo.text}`;

  let edit = document.createElement('span');
  edit.classList.add('edit');
  spanParent.append(edit);
  edit.addEventListener('click', (e) => {
    console.log(e);
  });

  let editIcon = document.createElement('i');
  editIcon.classList.add('fa-solid');
  editIcon.classList.add('fa-pen-to-square');
  edit.prepend(editIcon);
};

I want that when user click edit the todo text turn to editable input and save new value on enter or clicking outside and it become not editable again until pressing edit

I did some research and come across (contentEditable) attribute, but when tried to apply it things went sideways,

• when i turn it on the edit icon disappear and the text stay editable
• i think i need to do some kind of form that show on edit but don't know how to approach this idea

EDIT I'll try to explain more clearly hopefully,
I need to make the to-do text to be:
1- editable when user click the edit button
2- save the new user input text
3- become non-editable once user save updates
4- become editable again if user press edit button again

Thanks in advance

Answer 1

Based on the description that you provided, there is technically no need of using a form. You could stick to a standalone button and give it a click handler.

The click handler of this EDIT button works as follows: it sets the contenteditable attribute on the to-do text element (the span element above). This makes the text editable.

Then when the SAVE button is pressed, you should do the following: get the textContent of the span element, store it locally (I guess you're using localStorage ) and then finally remove the contenteditable attribute from the span element.

---

BTW, I feel that there is a lot of room of improvement in your code, for eg in variable naming, in the usage of methods, and in the order of statements:

1. append() and prepend() is, more or less, meant for bulk-insertion of nodes into the DOM. In your case, you have just one single node to add and so you could just stick to using insertBefore() or `appendChild().

2. Most probably, the to-do text is styled as a block in your application. Hence, it's better to make it a <div> element, instead of a <span> .

There is an awesome resource to learn about the HTML DOM, along with exercises to practice your skills: HTML DOM Introduction — CodeGuage .