JavaScriptте циклде иштөөчүлөрдү кошуу

Келгиле, азыр элементтерге окуя иштөөчүлөрдү томондогон кошууну үйрөнөлү. Мисалы, бизде төмөнкүдөй абзацтар бар дейли:

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

Ошондой эле бизде төмөнкүдөй функция бар дейли:

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

Келгиле, биздин абзацтарды цикл аркылуу аралап, ар бир абзацка чыкылдатуу иштөөчүсү катары func функциясын кошолу:

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

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

Келгиле, андан ары өтүп, каалаган абзацты чыкылдатканда ошол абзацтын тексти чыгарылсын. Бирок, бир көйгөй бар: абзацтар көп, бирок иштөөчү функция бир. Иштөөчү функциянын ичинде биз абзацтарды кантип айырмалай алабыз?

Бул жерде бизге this объектиси жардам берет - окуя учурунда функция чакырылганда, бул объект окуя болгон элементти көрсөтөт. Айтылгандарга ылайык, func функциябыздын кодун өзгөртөлү:

javascriptfunction func() {
  console.log(this.textContent); // абзацтын текстин чыгарабыз
}

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