Penggunaan Koleksi Map

Katakan kita ada perenggan:

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

Mari kita buat supaya apabila diklik pada setiap perenggan, nombor urutannya dalam senarai perenggan akan ditulis di hujungnya. Selesaikan tugas ini menggunakan Map.

Mari kita mulakan. Pertama, dapatkan perenggan kita dalam pembolehubah:

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

Buat koleksi Map baru:

let map = new Map;

Isi koleksi kita supaya kuncinya ialah perenggan kita, dan nilainya ialah nombor urut:

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

Ulang kitar perenggan dan pasang pengendali klik pada mereka:

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

Sekarang mari kita tambahkan nombor urutan ke hujung teks perenggan apabila diklik. Pada masa yang sama, kita akan mendapatkan nombor ini dari koleksi kita:

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

Diberikan input. Ulang kitar input ini dan buat koleksi Map di mana kuncinya ialah input, dan nilainya ialah nombor urut mereka pada halaman. Buat supaya apabila diklik pada mana-mana input, nombor urutnya akan ditulis ke dalam value-nya.

Diberikan input. Ke dalam setiap input boleh dimasukkan nombor. Katakan apabila ditekan Enter, input mengingati nombor yang dimasukkan. Buat supaya apabila kehilangan fokus pada input, array semua nombor yang sebelumnya dimasukkan ke dalam input itu dipaparkan ke konsol.