Penerapan Koleksi Map

Misalkan kita memiliki paragraf-paragraf:

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

Mari kita buat agar saat diklik, setiap paragraf akan menambahkan nomor urutnya dalam daftar paragraf di akhir teksnya. Mari selesaikan masalah ini menggunakan Map.

Mari kita mulai. Pertama-tama, ambil paragraf-paragraf kita ke dalam variabel:

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

Buat koleksi Map baru:

javascriptlet map = new Map;

Isi koleksi kita sehingga kuncinya adalah paragraf-paragraf kita, dan nilainya adalah nomor urut:

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

Ulangi paragraf dengan loop dan pasang penangan klik pada mereka:

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

Sekarang, saat diklik, mari tambahkan nomor urut ke akhir teks paragraf. Pada saat yang sama, kita akan mendapatkan nomor ini dari koleksi kita:

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