Map-kokoelmien käyttö

Olkoon meillä kappaleita:

html<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:

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

Luodaan uusi Map-kokoelma:

javascriptlet map = new Map;

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

javascriptlet 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ä:

javascriptfor (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:

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