How to edit a li with Javascript?

Question

Objective: Get the contents of <li>, play in the text field, change, return pressing Enter and clear the field.

Upshot: The closest I can get is to take the content, edit it in the text field, return it in the list but I can’t clear the field without some problem in a <li>.

Question: It is possible to do this using this code?

My current code:

let lista = document.querySelector('.lista');
let campo = document.querySelector('.campo');

lista.addEventListener('click',function(event){
    let y = event.target;
    campo.value = y.textContent;
    campo.addEventListener('keypress',function(event){
        if(event.keyCode === 13) {
            y.textContent = event.target.value;
            y = '';
        };
    });
});

 <ul class="lista">
    <li class="lista__item">um</li>
    <li class="lista__item">dois</li>
    <li class="lista__item">tres</li>
 </ul>
<input class="campo" type="text" name="" id="">

Answer 1

A first problem is that you are adding the event click to the whole list:

let lista = document.querySelector('.lista');

If you click off a LI but within the UL, will trigger the event and the result will be that the field will receive the text of all LI.

To resolve this you can check whether the element that triggered the event (event.target) is a LI (and not the UL).

That was one thing, now the other problem is that nesting one event inside the other, each time the main event is triggered, will create in memory an instance of the nested event. Switching kids every time you click on one LI, will create an event listener keypress in the field, and this will cause each time the enter key is pressed, to trigger the event onkeypress several times, in the same number of times the click event was triggered.

What you can do is separate the events and declare a variable, outside the two events, to store the LI which is being edited:

// aguarda o carregamento do DOM
document.addEventListener("DOMContentLoaded", function(){
   let lista = document.querySelector('.lista');
   let campo = document.querySelector('.campo');
   let li; // variável que receberá a LI que está sendo editada
   
   lista.addEventListener('click',function(event){
       li = event.target;
       if(li.tagName == "LI"){ // verifica se é uma LI
          campo.value = li.textContent;
       }
   });
   
   campo.addEventListener('keypress',function(event){
     if(event.keyCode === 13 && li) {
         li.textContent = campo.value;
         campo.value = ''; // esvazia o campo
         li = null; // reseto a variável
     };
   });
});

<ul class="lista">
    <li class="lista__item">um</li>
    <li class="lista__item">dois</li>
    <li class="lista__item">tres</li>
 </ul>
<input class="campo" type="text" name="" id="">

Answer 2

Hello,

The problem is that you can’t clean up the input after pressing enter?

Well, the problem is you’re putting y = '', whereas y is the target of event of your list.

For you to clear the contents of input, you just put event.target.value = '' within their condition, thus remaining:

if (event.keyCode === 13) {
   y.textContent = event.target.value;
   event.target.value = "";
}

I also noticed that he adds a new event every time he runs the click, causing unforeseen errors, so I took the liberty to fix it.

lista.addEventListener("click", function(event) {
    let y = event.target;
    campo.value = y.textContent;
    campo.onkeypress = function(event) {
        if (event.keyCode === 13) {
            y.textContent = event.target.value;
            event.target.value = "";
        }
    };
});

I just switched addEventListener for onkeypress =