Добијање 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 + '!';
	}
});

Дати су параграфи и дугме. Корисник клиће на ове параграфе у произвољном редоследу. Направите тако да при клику на дугме на крај сваког параграфа на који је извршен клик буде додат знак узвика.