Ottenere elementi DOM senza duplicati

Supponiamo di avere dei paragrafi e un pulsante:

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

<button>click me</button>

L'utente fa clic su questi paragrafi in un ordine arbitrario. Facciamo in modo che alla pressione del pulsante, alla fine di ogni paragrafo su cui è stato fatto clic, venga aggiunto un punto esclamativo. Risolviamo il problema tramite Set.

Iniziamo. Per prima cosa otteniamo i nostri elementi in variabili:

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

Creiamo una nuova collezione Set:

let set = new Set;

Iteriamo i paragrafi con un ciclo e aggiungiamo loro un gestore di click:

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

Ora, al click su un paragrafo, aggiungiamo quel paragrafo alla collezione:

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

Grazie all'uso della collezione Set, un click ripetuto su un paragrafo non porterà all'aggiunta di un duplicato del paragrafo.

Ora, al click sul pulsante, iteriamo il contenuto della nostra collezione e ad ogni paragrafo aggiungiamo un punto esclamativo alla fine:

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

Sono dati dei paragrafi e un pulsante. L'utente fa clic su questi paragrafi in un ordine arbitrario. Fate in modo che alla pressione del pulsante, alla fine di ogni paragrafo su cui è stato fatto clic, venga aggiunto un punto esclamativo.