Bearbeitung in einer Gruppe von Elementen in JavaScript

Nehmen wir nun an, wir haben nicht einen Absatz, sondern viele:

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

Lassen Sie uns es so einrichten, dass bei einem Klick auf einen beliebigen Absatz ein Input zur Bearbeitung erscheint.

Eigentlich stellt diese Aufgabe für uns keine Schwierigkeit dar, da fast der gesamte Code von uns in der vorherigen Lektion erhalten wurde.

Um unsere Aufgabe zu lösen, starten wir einfach eine Schleife über die Absätze und verwenden in der Schleife den Code der vorherigen Lektion (dieser Code muss nicht einmal geändert werden):

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