Anvendelse af Map-samlinger

Lad os sige, at vi har disse afsnit:

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

Lad os gøre det sådan, at når der klikkes på hvert afsnit, skrives dets rækkenummer i slutningen af afsnittet. Lad os løse opgaven ved hjælp af Map.

Lad os komme i gang. Først henter vi vores afsnit ind i en variabel:

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

Lad os oprette en ny Map-samling:

let map = new Map;

Lad os udfylde vores samling, så nøglerne er vores afsnit, og deres værdier er rækkenumre:

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

Lad os iterere gennem afsnittene med en løkke og tilføje en klik-håndtering til dem:

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

Lad os nu tilføje rækkenummeret til slutningen af afsnittets tekst, når der klikkes. Vi vil hente dette nummer fra vores samling:

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

Der gives inputfelter. Iterer gennem disse inputfelter med en løkke og opret en samling Map, hvor nøglerne er inputfelterne, og værdien er deres rækkenummer på siden. Gør det sådan, at når der klikkes på et hvilket som helst inputfelt, bliver dets rækkenummer skrevet i dets value.

Der gives inputfelter. I hvert inputfelt kan der indtastes et tal. Lad inputfeltet gemme det indtastede tal ved tryk på Enter. Gør det sådan, at ved tab af fokus i inputfeltet udskrives et array med alle de tal, der tidligere er indtastet i inputfeltet, i konsollen.