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;
}

Ошондой эле input элементтери берилген. Сиздин милдетиңиз - биздин каалаган input ичинде фокус жоготулганда жогорудагы функция аткарылсын.

Сандары бар абзацтар берилген. Сиздин милдетиңиз - каалаган абзацты чыкылдатканда, анын ичиндеги саны квадратка көтөрүлсүн.