Bruk av Map-samlinger

La oss si at vi har disse avsnittene:

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

La oss gjøre det slik at når man klikker på hvert avsnitt, skrives dets ordensnummer inn på slutten av avsnittet. La oss løse oppgaven ved hjelp av Map.

La oss komme i gang. Først henter vi avsnittene våre inn i en variabel:

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

La oss opprette en ny Map-samling:

let map = new Map;

La oss fylle samlingen vår slik at nøklene er avsnittene våre, og verdiene deres er ordensnumrene:

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

La oss gå gjennom avsnittene med en løkke og legge til en klikk-håndterer på dem:

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

La oss nå ved klikk legge til ordensnummeret på slutten av avsnittets tekst. Vi henter dette nummeret fra samlingen vår:

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

Det er gitt inndatafelt. Gå gjennom disse inndatafeltene med en løkke og opprett en Map-samling der nøklene er inndatafeltene, og verdien er deres ordensnummer på siden. Gjør det slik at når du klikker på et hvilket som helst inndatafelt, skrives dets ordensnummer inn i value.

Det er gitt inndatafelt. I hvert inndatafelt kan man skrive inn et tall. La inndatafeltet huske det innskrevne tallet når man trykker på Enter. Gjør det slik at når inndatafeltet mister fokus, skrives en matrise med alle tallene som tidligere er skrevet inn i inndatafeltet ut i konsollen.