Hentning af DOM-elementer uden duplikater

Lad os sige, at vi har disse afsnit og en knap:

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

<button>click me</button>

Lad brugeren klikke på disse afsnit i en vilkårlig rækkefølge. Lad os gøre det sådan, at når der klikkes på knappen, vil et udråbstegn blive tilføjet til slutningen af hvert afsnit, der er blevet klikket på. Lad os løse opgaven med Set.

Lad os komme i gang. Først henter vi vores elementer i variabler:

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

Lad os oprette en ny Set-samling:

let set = new Set;

Lad os iterere gennem afsnittene med en løkke og tilføje en klik-håndtering til dem:

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

Lad os nu ved klik på et afsnit tilføje det afsnit til samlingen:

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

Fordi vi bruger Set-samlingen, vil et gentaget klik på et afsnit ikke føre til tilføjelse af et duplikat afsnit.

Lad os nu ved klik på knappen iterere gennem indholdet af vores samling og tilføje et udråbstegn til slutningen af hvert afsnit:

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

Der er givet afsnit og en knap. Brugeren klikker på disse afsnit i en vilkårlig rækkefølge. Gør sådan, at når der klikkes på knappen, vil et udråbstegn blive tilføjet til slutningen af hvert afsnit, der er blevet klikket på.