Map gyűjtemények alkalmazása

Tegyük fel, hogy vannak bekezdéseink:

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

Tegyük meg, hogy minden egyes bekezdésre kattintáskor a végére íródjon a sorszáma a bekezdések listájában. Oldjuk meg a feladatot Map segítségével.

Kezdjük neki. Először szerezük be a bekezdéseinket egy változóba:

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

Hozzunk létre egy új Map gyűjteményt:

let map = new Map;

Töltsük fel a gyűjteményt úgy, hogy a kulcsok a bekezdéseink legyenek, az értékeik pedig a sorszámok:

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

Végigjárjuk a bekezdéseket ciklussal és eseménykezelőt helyezünk rájuk kattintásra:

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

Most pedig kattintáskor adjuk hozzá a sorszámot a bekezdés szövegéhez. Közben ezt a sorszámot a gyűjteményünkből kapjuk meg:

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

Adottak input mezők. Járjuk be ezeket a mezőket ciklussal és hozzunk létre egy Map gyűjteményt, amelynek kulcsai az input mezők, értékeik pedig az oldalon elfoglalt sorszámuk. Állítsuk be, hogy bármelyik input mezőre kattintáskor a value-jébe íródjon a sorszáma.

Adottak input mezők. Minden input mezőbe beírható egy szám. Enter megnyomásakor az input jegyezze meg a beírt számot. Állítsuk be, hogy amikor az input elveszti a fókuszt, a konzolra írja ki az összes korábban az inputba beírt szám tömbjét.