Uređivanje u grupi elemenata na JavaScript-u

Pretpostavimo sada da imamo ne jedan, već mnogo pasusa:

html<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Hajde da napravimo da se klikom na bilo koji pasus u njemu pojavi input za uređivanje.

Zapravo, ovakav zadatak za nas ne predstavlja komplikaciju, pošto je skoro ceo kod već dobijen u prethodnoj lekciji.

Za rešavanje našeg zadatka jednostavno ćemo pokrenuti petlju kroz pasuse i u petlji koristiti kod iz prethodne lekcije (ovaj kod čak i ne moramo menjati):

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    let input = document.createElement('input');
    input.value = elem.textContent;
    
    elem.textContent = '';
    elem.appendChild(input);
    
    input.addEventListener('blur', function() {
      elem.textContent = this.value;
      elem.addEventListener('click', func);
    });
    
    elem.removeEventListener('click', func);
  });
}