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ň.