Získavanie DOM elementov bez duplikátov

Majme nasledujúce odseky a tlačidlo:

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

<button>click me</button>

Používateľ kliká na tieto odseky v ľubovoľnom poradí. Po kliknutí na tlačidlo pridajte na koniec každého odseku, na ktorý bolo kliknuté, výkričník. Úlohu vyriešime pomocou Set.

Poďme na to. Najprv získame naše elementy do premenných:

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

Vytvorme novú kolekciu Set:

let set = new Set;

Prejdeme odseky cyklom a pridáme im obsluhu kliknutia:

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

Po kliknutí na odsek pridáme tento odsek do kolekcie:

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

Vďaka tomu, že používame kolekciu Set, opakované kliknutie na odsek nepovedie k pridaniu duplikátu odseku.

Po kliknutí na tlačidlo prejdeme obsah našej kolekcie a každému odseku na koniec pridáme výkričník:

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

Sú dané odseky a tlačidlo. Používateľ kliká na tieto odseky v ľubovoľnom poradí. Zabezpečte, aby po kliknutí na tlačidlo na koniec každého odseku, na ktorý bolo kliknuté, bol pridaný výkričník.