Anonyymisten funktioiden sitomisen poisto JavaScriptissä

Oletetaan nyt, että kappaleisiimme on sidottu anonyymi funktio:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Oletetaan, että haluamme irrottaa tämän funktion kappaleesta klikkaamisen jälkeen. Meitä odottaa kuitenkin ongelma: funktiolla ei ole nimeä, mikä tarkoittaa, että emme pysty viittaamaan siihen sen nimellä irrottaaksemme sen.

Ongelman ratkaisemiseksi funktiolle on annettava nimi, tekemällä siitä nimetty funktionaalinen lauseke. Tehdään näin:

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

for (let elem of elems) {
	elem.addEventListener('click', function func() { // annettiin funktiolle nimi
		console.log(this.textContent);
	});
}

Nyt tämä funktio voidaan irrottaa sen sisällä itsessään:

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

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		console.log(this.textContent);
		this.removeEventListener('click', func); // irroitetaan funktio
	});
}

Annettu lista ul, jossa jokaisessa kohdassa on kirjoitettu numero. Tee niin, että minkä tahansa li:n klikkaaminen kasvattaa sen numeroa yhdellä.

Muokkaa edellistä tehtävää siten, että jokainen li kasvattaa omaa arvoaan vain ensimmäisellä painalluksella sitä vasten.

Muokkaa edellistä tehtävää siten, että jokainen li kasvattaa omaa arvoaan vain, jos sen arvo on pienempi kuin 10.