Hämta DOM-element utan dubbletter

Låt oss säga att vi har stycken och en knapp:

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

<button>click me</button>

Låt användaren klicka på dessa stycken i godtycklig ordning. Låt oss göra så att när knappen trycks, läggs ett utropstecken till i slutet av varje stycke som klickades på. Låt oss lösa uppgiften med Set.

Låt oss börja. Först, låt oss få våra element i variabler:

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

Låt oss skapa en ny Set-samling:

let set = new Set;

Låt oss iterera över styckena med en loop och koppla en klickhanterare till dem:

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

Låt oss nu vid klick på ett stycke lägga till detta stycke i samlingen:

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

På grund av att vi använder Set-samlingen kommer ett upprepade klick på ett stycke inte att leda till att en dubblett av stycket läggs till.

Låt oss nu vid klick på knappen iterera över innehållet i vår samling och lägga till ett utropstecken i slutet av varje stycke:

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

Det finns stycken och en knapp. Användaren klickar på dessa stycken i godtycklig ordning. Gör så att när knappen trycks, läggs ett utropstecken till i slutet av varje stycke som klickades på.