Matumizi ya Map ya Mkusanyiko

Wacha tuwe na aya:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

Wacha tufanye ili kwa kubofya kila aya nambari yake ya mlolongo iandikwe mwishoni mwake kwenye orodha ya aya. Tatua tatizo kwa kutumia Map.

Tuanze. Kwanza tupate aya zetu kwenye kutofautisha:

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

Tuunde mkutano mpya Map:

let map = new Map;

Wacha tujaze mkutano wetu ili funguo ziwe aya zetu, na maadili yake ziwe nambari za mlolongo:

let i = 1;
for (let elem of elems) {
	map.set(elem, i++);
}

Wacha tuzungushe aya kwa mzunguko na kuweka kichungi cha kubofya:

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

Wacha sasa kwa kubofya tuongeze nambari ya mlolongo mwishoni mwa maandishi ya aya. Wakati huo huo tutapata nambari hii kutoka kwa mkutano wetu:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.textContent += map.get(this);
	});
}

Kuna viingizo. Zungusha viingizo hivi kwa mzunguko na uunde mkutano Map, ambapo funguo zitakuwa viingizo, na thamani yake - iwe nambari yake ya mlolongo kwenye ukurasa. Fanya hivi, ili kwa kubofya kwenye kuingiza kwa value kuandikwa nambari yake ya mlolongo.

Kuna viingizo. Kwa kila kuingiza kunaweza kuingiza nambari. Wacha kwa kubonyeza Enter kuingiza kikumbuke nambari iliyoingizwa. Fanya hivi, ili kwa kupoteza umakini kwenye kuingiza kwenye konsoli ituletwe safu ya nambari zote zilizoingizwa hapo awali kwenye kuingiza nambari.