Aplikácia kolekcií Map

Majme nasledujúce odseky:

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

Urobme tak, aby po kliknutí na každý odsek sa mu na koniec zapísalo jeho poradové číslo v zozname odsekov. Úlohu vyriešme pomocou Map.

Poďme na to. Najprv získajme naše odseky do premennej:

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

Vytvorme novú kolekciu Map:

javascriptlet map = new Map;

Vyplňme našu kolekciu tak, aby kľúčami boli naše odseky a ich hodnotami - poradové čísla:

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

Prejdime odseky cyklom a nastavme na nich obsluhu kliknutia:

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

Poďme teraz po kliknutí pridať poradové číslo na koniec textu odseku. Pritom budeme získať toto číslo z našej kolekcie:

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