Map kolleksiyalarının tətbiqi

Tutaq ki, bizim abzaslarımız var:

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

Gəlin elə edək ki, hər bir abzasın üzərinə kliklədikdə onun sonuna abzaslar siyahısındakı sıra nömrəsi yazılsın. Məsələni Map ilə həll edək.

Başlayaq. Əvvəlcə abzaslarımızı dəyişənə əldə edək:

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

Yeni Map kolleksiyası yaradaq:

javascriptlet map = new Map;

Kolleksiyamızı elə dolduraq ki, açar kimi abzaslarımız, dəyər kimi isə onların sıra nömrələri olsun:

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

Abzasları dövrə ilə gəzib onlara klik üçün hadisə əlavə edək:

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

Gəlin indi klik zamanı abzasın mətninin sonuna sıra nömrəsini əlavə edək. Bunu edərkən nömrəni kolleksiyamızdan əldə edək:

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