DOM-elementen verkrijgen zonder duplicaten

Stel we hebben paragrafen en een knop:

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

<button>click me</button>

Stel dat de gebruiker op deze paragrafen klikt in willekeurige volgorde. Laten we ervoor zorgen dat er bij het indrukken van de knop aan het einde van elke paragraaf waarop is geklikt, een uitroepteken wordt toegevoegd. Laten we het probleem oplossen via Set.

Laten we beginnen. Laten we eerst onze elementen in variabelen verkrijgen:

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

Laten we een nieuwe Set collectie aanmaken:

let set = new Set;

Laten we de paragrafen doorlopen met een lus en er een click event handler op plaatsen:

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

Laten we nu bij een klik op een paragraaf deze paragraaf toevoegen aan de collectie:

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

Omdat we de Set collectie gebruiken, zal een herhaalde klik op een paragraaf niet leiden tot het toevoegen van een duplicaat van de paragraaf.

Laten we nu bij een klik op de knop de inhoud van onze collectie doorlopen en aan elke paragraaf aan het einde een uitroepteken toevoegen:

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

Er worden paragrafen en een knop gegeven. De gebruiker klikt op deze paragrafen in willekeurige volgorde. Zorg ervoor dat bij het indrukken van de knop aan het einde van elke paragraaf waarop is geklikt, een uitroepteken wordt toegevoegd.