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 объекти ёрдам беради - воқе sodir boʻlganda функция чақирилганда, бу объект ўша воқе sodir boʻlgan элементни кўрсатади. Келтирилган гапга мувофиқ бизнинг func функциямиз кодини қайта ишлаймиз:

function func() {
	console.log(this.textContent); // абзацнинг матнини чиқарамиз
}

Куйидаги функция берилган:

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

 Шунингдек, инпутлар берилган. Ҳар бир инпутимизда фокус йўқотилганда юқорида келтирилган функция ишлашини таъминланг.

Сонлар билан абзацлар берилган. Ҳар қандай абзацга сичқонча босилганда унинг ичидаги сони квадратга кўтарилишини таъминланг.