Dodavanje rukovalaca u petlji u JavaScript-u

Sada ćemo naučiti kako masovno dodati rukovaoce događaja elementima. Neka, na primer, imamo paragrafe:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

Neka takođe postoji funkcija:

javascriptfunction func() {
  console.log('!');
}

Proći ćemo kroz naše paragrafe u petlji i svakom paragrafu dodati funkciju func kao rukovaoca klika:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', func);
}

Idemo korak dalje i uradimo tako da klikom na bilo koji paragraf bude ispisan tekst tog paragrafa. Međutim, postoji problem: paragrafa ima više, a funkcija-rukovalac je jedna. Kako da razlikujemo naše paragrafe unutar funkcije-rukovalaca?

U tome će nam pomoći objekat this - prilikom pozivanja funkcije u momentu događaja, ovaj objekat će pokazivati na onaj element gde se taj događaj dogodio. Prilagodimo kod naše funkcije func u skladu sa rečenim:

javascriptfunction func() {
  console.log(this.textContent); // ispisujemo tekst paragrafa
}

Задание 1

Data je sledeća funkcija:

javascriptfunction func() {
  this.value = Number(this.value) + 1;
}

Data su takođe input polja. Uredite tako da se gubljenjem fokusa u bilo kom od naših input polja izvrši gore navedena funkcija.

Задание 2

Data su polja sa brojevima. Uredite tako da se klikom na bilo koji paragraf njegov broj u njemu podigne na kvadrat.