Map-kokoelmien käyttö

Olkoon meillä kappaleita:

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

Tehdään niin, että jokaisen kappaleen klikkauksen jälkeen sen loppuun kirjoitetaan sen järjestysnumero kappalelistassa. Ratkaistaan tehtävä Map-kokoelman avulla.

Aloitetaan. Ensin haetaan kappaleemme muuttujaan:

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

Luodaan uusi Map-kokoelma:

let map = new Map;

Täytetään kokoelma siten, että avaimina ovat kappaleemme, ja niiden arvoina - järjestysnumerot:

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

Käydään kappaleet läpi silmukalla ja lisätään niihin klikkauskäsittelijä:

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

Lisätään nyt klikkauksen yhteydessä järjestysnumero kappaleen tekstin loppuun. Haetaan samalla tämä numero kokoelmastamme:

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

Annettuna syötekentät. Käy nämä syötekentät läpi silmukalla ja luo Map-kokoelma, jossa avaimina ovat syötekentät, ja arvona - niiden järjestysnumero sivulla. Tee niin, että minkä tahansa syötekentän klikkauksen yhteydessä sen value-arvoon kirjoitetaan sen järjestysnumero.

Annettuna syötekentät. Kuhunkin syötekenttään voidaan syöttää luku. Tee niin, että Enter-näppäimen painalluksen yhteydessä syötekenttä tallentaa syötetyn luvun. Tee niin, että kohdistimen menetyksen yhteydessä syötekentässä konsoliin tulostetaan taulukko kaikista aiemmin syötekenttään syötetyistä luvuista.