How to edit a li with Javascript?

Asked

Viewed 110 times

3

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="">

2 answers

3


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="">

  • Speak, Sam! I just ran your code and debugged it. The same error happened to the other, if you select the Li and click enter it passes the value, but if I click enter again, without having changed the target by clicking another read, then it passes the blank field to the li, changing again. For this, followed the same principle of the other code, added li = '' at the end of the event field.addeventlistener('keypress',Function(Event) and ran perfectly. Anyway, both proposals helped me a lot, thank you very much!!!

  • I changed the code just before your comment.

  • 1

    Putz, perfect!!! Thank you so much for having taken some of your time in helping.

1

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 =

  • 1

    Perfect, Lucas! Your replacement addeventlistener for onkeypress was the solution! I checked in the browser’s Debugger and to be perfect, I only had to keep the y='''; thus, it was the target stored in the variable and if I press enter without having clicked again on some Li, it does not pass the value of the field (whatever) for the target that had been selected. Very much worked!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.