Assegnazione di gestori di eventi in ciclo in JavaScript

Nella lezione precedente abbiamo imparato a creare nuovi elementi in un ciclo. Ora andiamo ad assegnare gestori di eventi durante la creazione di nuovi elementi.

Supponiamo di avere nuovamente questo div genitore:

html<div id="parent"></div>

Avviamo un ciclo che aggiungerà alla fine del nostro div 9 nuovi paragrafi, assegnando loro un gestore per il click:

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Assegniamo il gestore per il click:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}