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