Dodavanje rukovalaca u petlji u JavaScript-u

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

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

Neka takođe postoji funkcija:

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

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

let 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:

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

Data je sledeća funkcija:

function 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.

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