Pridávanie obslužných rutín v cykle v JavaScripte

Poďme sa teraz naučiť hromadne pridávať obslužné rutiny udalostí elementom. Nech, napríklad, máme odseky:

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

Nech máme tiež funkciu:

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

Poďme prejsť naše odseky v cykle a každému odseku pridajme ako obslužnú rutinu kliknutia funkciu func:

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

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

Poďme ďalej a urobme tak, aby pri kliknutí na ľubovoľný odsek bol vypísaný text tohto odseku. Je tu však problém: odsekov je veľa, ale obslužná rutina je len jedna. Ako môžeme rozlíšiť naše odseky vo vnútri obslužnej rutiny?

S tým nám pomôže objekt this - pri volaní funkcie v momente udalosti tento objekt bude ukazovať na ten element, kde sa táto udalosť stala. Prepracujme kód našej funkcie func v súlade s povedaným:

function func() {
	console.log(this.textContent); // vypíšeme text odseku
}

Daná je nasledujúca funkcia:

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

Sú dané tiež vstupy. Urobte tak, aby pri strate fókusu v ktoromkoľvek z našich vstupov bola vykonaná uvedená funkcia.

Sú dané odseky s číslami. Urobte tak, aby pri kliknutí na ľubovoľný odsek sa jeho číslo v ňom umocnilo na druhú.