Mendapatkan Elemen DOM Tanpa Pendua

Katakan kita mempunyai perenggan dan butang:

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

<button>click me</button>

Katakan pengguna mengklik pada perenggan-perenggan ini dalam urutan sewenang-wenangnya. Mari kita buat supaya apabila butang ditekan, di hujung setiap perenggan yang telah diklik, akan ditambahkan tanda seru. Mari selesaikan masalah ini menggunakan Set.

Mari kita mulakan. Pertama, dapatkan elemen-elemen kita dalam pembolehubah:

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

Mari buat koleksi Set baru:

let set = new Set;

Mari ulangi perenggan dengan gelung dan pasangkan pengendali klik pada mereka:

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

Sekarang, mari apabila perenggan diklik, kita tambahkan perenggan tersebut ke dalam koleksi:

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

Oleh kerana kita menggunakan koleksi Set, klikan berulang pada perenggan tidak akan menyebabkan penambahan pendua perenggan.

Sekarang, mari apabila butang diklik, kita ulangi kandungan koleksi kita dan untuk setiap perenggan tambahkan tanda seru di hujung:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

Diberikan perenggan dan butang. Pengguna mengklik pada perenggan-perenggan ini dalam urutan sewenang-wenangnya. Buat supaya apabila butang ditekan, di hujung setiap perenggan yang telah diklik, ditambahkan tanda seru.