Употреба на Map колекции

Нека имаме параграфи:

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

Да направиме така што при клик на секој параграф на неговиот крај да му се запише неговиот редоследен број во листата на параграфи. Да ја решиме задачата преку Map.

Да почнеме. Прво да ги добиеме нашите параграфи во променлива:

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

Да креираме нова колекција Map:

javascriptlet map = new Map;

Да ја пополниме нашата колекција така што клучеви да бидат нашите параграфи, а нивните вредности - редоследните броеви:

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

Да ги поминеме параграфите со циклус и да им го ставиме обработувачот на клик:

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

Сега при клик да го додадеме редоследниот број на крајот од текстот на параграфот. Притоа да го добиеме овој број од нашата колекција:

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