Zastosowanie kolekcji Map

Załóżmy, że mamy akapity:

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

Sprawmy, aby po kliknięciu na każdy akapit na jego końcu zapisywał się jego kolejny numer na liście akapitów. Rozwiążmy zadanie za pomocą Map.

Zacznijmy. Na początku pobierzmy nasze akapity do zmiennej:

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

Stwórzmy nową kolekcję Map:

javascriptlet map = new Map;

Wypełnijmy naszą kolekcję tak, aby kluczami były nasze akapity, a ich wartościami - kolejne numery:

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

Przejdźmy pętlą przez akapity i powieśmy na nich obsługę kliknięcia:

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

Dodajmy teraz po kliknięciu kolejny numer na koniec tekstu akapitu. Przy tym będziemy pobierać ten numer z naszej kolekcji:

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