JavaScript-de işleýjileri aýlawda goşmak

Indi elementlere ýygy-ýygydan wakalar işleýjilerini goşmagy öwreneliň. Mysal üçin, aşakdaky ýazylarymyz bar diýeliň:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Bizde şeýle hem bir funksiýa bar diýeliň:

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

Geliň ýazylarymyzy aýlawdan geçirip we her ýazynyň basylma wakasyna func funksiýasyny işleýji hökmünde goşalyň:

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

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

Geliň öňe çykyp, islendik ýazyna basylanda şol ýazynyň tekstiniň çykyş edilmegini edeliň. Emma bir kynçylyk bar: ýazylar köp, işleýji funksiýa bolsa bir. Işleýji funksiýanyň içinde ýazylarymyzy nädip tapawutlandyrar ýaly?

Bu ýerde bizä this obýekti kömek eder - waka bolup geçýän çagyryşda bu obýekt şol elemente görkezer, nämede waka bolsa. func funksiýamyzyň koduny aýdylanlara laýyklykda üýtgedeliň:

function func() {
	console.log(this.textContent); // ýazynyň tekstini çykaryň
}

Aşakdaky funksiýa berlen:

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

Şeýle hem girişler berlen. Islendik girişimizde fokus ýitirilende ýokarda görkezilen funksiýanyň ýerine ýetirilmegini ýerine ýetiriň.

Sanalar bilen ýazylar berlen. Islendik ýazyna basylanda onuň sanynyň kwadrata göterilmegini ýerine ýetiriň.