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);
  });
}