Λήψη στοιχείων 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 + '!';
	}
});

Δίνονται παράγραφοι και ένα κουμπί. Ο χρήστης κάνει κλικ σε αυτές τις παραγράφους με τυχαία σειρά. Κάντε έτσι ώστε με το πάτημα του κουμπιού, στο τέλος κάθε παραγράφου που είχε γίνει κλικ, να προστίθεται ένα θαυμαστικό.