Editarea în grup de elemente în JavaScript

Să presupunem că acum avem nu un paragraf, ci mai multe:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

Să facem astfel încât la click pe orice paragraf să apară un câmp de introducere pentru editare.

De fapt, această sarcină nu reprezintă o dificultate pentru noi, deoarece aproape tot codul a fost obținut de noi în lecția precedentă.

Pentru a rezolva sarcina noastră, vom rula pur și simplu o buclă prin paragrafe și în buclă vom folosi codul lecției precedente (acest cod nici măcar nu va trebui modificat):

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);
  });
}