Bewerking in een groep elementen in JavaScript

Stel dat we nu niet één paragraaf hebben, maar meerdere:

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

Laten we ervoor zorgen dat bij een klik op een willekeurige paragraaf er een invoerveld voor bewerking verschijnt.

Eigenlijk is deze taak niet moeilijk voor ons, omdat bijna alle code al door ons verkregen was in de vorige les.

Om onze taak op te lossen, starten we gewoon een lus door de paragrafen en gebruiken we de code van de vorige les in de lus (deze code hoeft niet eens aangepast te worden):

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