Добивање на DOM елементи без дупликати

Да претпоставиме дека имаме параграфи и копче:

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

<button>click me</button>

Нека корисникот клика на овие параграфи во произволен редослед. Да направиме така што со притискање на копчето на крајот од секој параграф, на кој што е извршен клик, да се додаде извичник. Да ја решиме задачата преку Set.

Да започнеме. Прво, да ги добиеме нашите елементи во променливи:

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

Да создадеме нова колекција Set:

let set = new Set;

Да ги итерираме параграфите со циклус и да поставиме на нив обработувач за клик:

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

Сега, при клик на параграф, да го додадеме тој параграф во колекцијата:

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

Бидејќи користиме колекција Set повторен клик на параграф нема да доведе до додавање на дупликат на параграфот.

Сега, да направиме така што при клик на копчето да ги итерираме содржините на нашата колекција и на секој параграф на крајот да додадеме извичник:

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

Дадени се параграфи и копче. Корисникот клика на овие параграфи во произволен редослед. Направете така што со притискање на копчето на крајот од секој параграф, на кој што е извршен клик, да се додаде извичник.