Mendapatkan Elemen DOM Tanpa Duplikat

Misalkan kita memiliki paragraf dan tombol:

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

<button>click me</button>

Misalkan pengguna mengklik paragraf-paragraf ini dalam urutan acak. Mari kita buat agar saat tombol ditekan, di akhir setiap paragraf yang telah diklik, sebuah tanda seru ditambahkan. Mari selesaikan masalahnya menggunakan Set.

Mari kita mulai. Pertama-tama, dapatkan elemen-elemen kita ke dalam variabel:

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

Mari buat koleksi Set baru:

let set = new Set;

Mari ulangi paragraf dengan loop dan pasang penangan acara klik pada mereka:

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

Sekarang, mari saat klik pada paragraf, kita tambahkan paragraf tersebut ke dalam koleksi:

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

Karena kita menggunakan koleksi Set, klik berulang pada paragraf tidak akan mengakibatkan penambahan duplikat paragraf.

Sekarang, mari saat tombol diklik, kita ulangi isi koleksi kita dan untuk setiap paragraf tambahkan tanda seru di akhir:

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

Diberikan paragraf dan tombol. Pengguna mengklik paragraf-paragraf ini dalam urutan acak. Buatlah agar saat tombol ditekan, di akhir setiap paragraf yang telah diklik, sebuah tanda seru ditambahkan.