Získávání DOM elementů bez duplicit

Předpokládejme, že máme odstavce a tlačítko:

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

<button>click me</button>

Předpokládejme, že uživatel kliká na tyto odstavce v libovolném pořadí. Udělejme to, aby po stisknutí tlačítka na konec každého odstavce, na který bylo kliknuto, byl přidán vykřičník. Vyřešme úlohu pomocí Set.

Pojďme na to. Nejprve získáme naše elementy do proměnných:

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

Vytvořme novou kolekci Set:

let set = new Set;

Projděme odstavce cyklem a přidejme k nim obslužnou rutinu kliknutí:

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

Nyní po kliknutí na odstavec přidejme tento odstavec do kolekce:

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

Díky tomu, že používáme kolekci Set, opakované kliknutí na odstavec nepovede k přidání duplicitního odstavce.

Nyní po kliknutí na tlačítko projděme obsah naší kolekce a ke každému odstavci přidejme na konec vykřičník:

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

Jsou dány odstavce a tlačítko. Uživatel kliká na tyto odstavce v libovolném pořadí. Udělejte to, aby po stisknutí tlačítka na konec každého odstavce, na který bylo kliknuto, byl přidán vykřičník.