Додавање руковаоца у петљи у JavaScript

Хајде сада да научимо како да масовно додајемо руковаоце догађаја елементима. Рецимо, на пример, да имамо следеће пасусе:

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

Претпоставимо да такође имамо и функцију:

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

Хајде да пређемо преко наших пасуса у петљи и сваком пасуду додамо функцију func као руковаоца клика:

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

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

Идемо даље и направимо да кликом на било који пасус буде исписан његов текст. Међутим, постоји проблем: пасуса има много, а функција-руковалац је само једна. Како да разликујемо наше пасусе унутар функције-руковаоца?

У томе ће нам помоћи објекат this - при позивању функције у тренутку догађаја овај објекат ће показивати на онај елемент на ком се тај догађај десио. Изменимо код наше функције func у складу са реченим:

function func() {
	console.log(this.textContent); // исписујемо текст пасуса
}

Дата је следећа функција:

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

Дати су такође и поља за унос (инпути). Направите тако да при губитку фокуса у било ком од наших поља за унос изврши горе наведена функција.

Дати су пасуси са бројевима. Направите тако да при клику на било који пасус његов број у њему буде степенован на квадрат.