Uporaba zbirk Map

Recimo, da imamo odstavke:

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

Naredimo tako, da se ob kliku na vsak odstvek na konec zapiše njegova zaporedna številka na seznamu odstavkov. Rešimo nalogo s pomočjo Map.

Pa začnimo. Najprej pridobimo naše odstavke v spremenljivko:

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

Ustvarimo novo zbirko Map:

javascriptlet map = new Map;

Zapolnimo našo zbirko tako, da so ključi naši odstavki, njihove vrednosti pa zaporedne številke:

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

Pojdimo skozi odstavke z zanko in nanje dodajmo obravnavalnik klikov:

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

Zdaj pa ob kliku dodajmo zaporedno številko na konec besedila odstavka. Pri tem bomo to številko pridobili iz naše zbirke:

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