Notikumu apstrādes pievienošana cilpā JavaScript

Iepriekšējā nodarbībā mēs iemācījāmies izveidot jaunus elementus cilpā. Tagad pievienosim notikumu apstrādes funkcijas, veidojot jaunus elementus.

Pieņemsim, ka mums atkal ir šāds vecāka elements:

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

Palaidīsim cilpu, kas mūsu div elementam pievienos 9 jaunus rindkopu elementus, pievienojot tiem klikšķa notikuma apstrādi:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Pievienojam klikšķa notikuma apstrādi:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}
Задание 1

Dots div elements. Palaidiet cilpu, kas pievienos mūsu div elementam 5 ievades laukus. Pieņemsim, ka dots arī rindkopa. Iestatiet tā, lai katrs no jaunajiem ievades laukiem, zaudējot fokusu, ierakstītu savu tekstu rindkopā.