DOM-elementtien hankinta ilman duplikaatteja

Oletetaan, että meillä on kappaleita ja painike:

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

<button>click me</button>

Anna käyttäjän napsautella näitä kappaleita missä tahansa järjestyksessä. Tehdään niin, että painiketta painamalla jokaisen napsautetun kappaleen loppuun lisätään huutomerkki. Ratkaistaan tehtävä Set:n avulla.

Aloitetaan. Ensin haetaan elementtimme muttujiin:

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

Luodaan uusi Set-kokoelma:

let set = new Set;

Käydään läpi kappaleet silmukalla ja asetetaan niille klikkauskäsittelijä:

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

Lisätään nyt kappaleen napsautuksen yhteydessä kyseinen kappale kokoelmaan:

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

Koska käytämme Set-kokoelmaa, kappaleen uudelleen napsautus ei johtaisi kappaleen duplikaatin lisäämiseen.

Asetetaan nyt painikkeen napsautukselle toiminto, joka käy läpi kokoelmamme sisällön ja lisää jokaisen kappaleen loppuun huutomerkin:

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

Annettuna on kappaleita ja painike. Käyttäjä napsauttelee näitä kappaleita missä tahansa järjestyksessä. Tee niin, että painiketta painamalla jokaisen napsautetun kappaleen loppuun lisätään huutomerkki.