Pridávanie obslužných metód do slučky v JavaScripte

V predchádzajúcej lekcii sme sa naučili vytvárať nové prvky v slučke. Teraz počas vytvárania nových prvkov pridáme obslužné metódy udalostí.

Predpokladajme, že máme opäť takéhoto rodičovského div:

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

Spustíme slučku, ktorá pridá na koniec nášho divu 9 nových odsekov a priradí im obslužnú metódu kliknutia:

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

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('p');
  p.textContent = '!';
  
  // Pridáme obslužnú metódu kliknutia:
  p.addEventListener('click', function() {
    console.log(this.textContent);
  });
  
  parent.appendChild(p);
}
Задание 1

Daný je div. Spustite slučku, ktorá pridá do nášho divu 5 vstupov. Nech je daný aj odsek. Zabezpečte, aby každý z nových vstupov po strate focusu zapísal svoj text do odseku.