Tilføjelse af event handlers i løkke på JavaScript

I den forrige lektion lærte vi at skabe nye elementer i en løkke. Lad os nu tilføje event handlers ved oprettelse af nye elementer.

Lad os igen have en forældre-div som denne:

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

Lad os starte en løkke, der tilføjer 9 nye afsnit til slutningen af vores div, og tilføjer en klik-handler til dem:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Tilføjer klik-handler:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}