Toepassing van Map collecties

Stel we hebben de volgende alinea's:

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

Laten we ervoor zorgen dat er na een klik op elke alinea zijn volgnummer in de lijst met alinea's aan het einde wordt toegevoegd. We lossen de taak op met behulp van Map.

Laten we beginnen. Laten we eerst onze alinea's in een variabele zetten:

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

Laten we een nieuwe Map collectie aanmaken:

let map = new Map;

Laten we onze collectie vullen, zodat de sleutels onze alinea's zijn, en hun waarden de volgnummers:

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

Laten we de alinea's doorlopen met een lus en er event handlers voor klikken aan hangen:

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

Laten we nu bij een klik het volgnummer aan het einde van de alineatekst toevoegen. We halen dit nummer uit onze collectie:

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

Er zijn invoervelden. Doorloop deze invoervelden met een lus en maak een collectie Map aan, waarin de sleutels de invoervelden zijn, en de waarde - hun volgnummer op de pagina. Zorg ervoor dat bij een klik op een invoerveld zijn volgnummer in value wordt geschreven.

Er zijn invoervelden. In elk invoerveld kan een getal worden ingevoerd. Stel dat bij het indrukken van Enter het invoerveld het ingevoerde getal onthoudt. Zorg ervoor dat bij het verliezen van focus in het invoerveld naar de console een array met alle eerder in het invoerveld ingevoerde getallen wordt uitgevoerd.