Redigering i gruppe av elementer i JavaScript

La oss nå si at vi ikke har ett avsnitt, men mange:

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

La oss gjøre det slik at ved et klikk på et hvilket som helst avsnitt dukker det opp en input for redigering i det.

Egentlig representerer ikke en slik oppgave noen vanskelighet for oss, siden nesten all koden ble oppnådd av oss i forrige leksjon.

For å løse oppgaven vår, kjører vi ganske enkelt en løkke gjennom avsnittene og i løkken bruker vi koden fra forrige leksjon (denne koden trenger vi ikke engang å endre):

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