Εφαρμογή των Συλλογών Map

Ας υποθέσουμε ότι έχουμε παραγράφους:

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

Ας κάνουμε έτσι ώστε με κάθε κλικ στη σειρά να γράφεται στον αντίστοιχο παράγραφο ο τακτικός του αριθμός στη λίστα των παραγράφων. Ας λύσουμε το πρόβλημα μέσω Map.

Ας ξεκινήσουμε. Αρχικά, ας πάρουμε τους παραγράφους μας σε μια μεταβλητή:

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

Ας δημιουργήσουμε μια νέα συλλογή Map:

let map = new Map;

Ας συμπληρώσουμε τη συλλογή μας έτσι ώστε τα κλειδιά να είναι οι παράγραφοι, και οι τιμές τους να είναι οι τακτικοί αριθμοί:

let i = 1;
for (let elem of elems) {
	map.set(elem, i++);
}

Ας διασχίσουμε τους παραγράφους με βρόχο και ας τοποθετήσουμε σε αυτούς έναν χειριστή κλικ:

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

Ας κάνουμε τώρα έτσι ώστε με το κλικ να προστίθεται ο τακτικός αριθμός στο τέλος του κειμένου της παραγράφου. Ταυτόχρονα, ας παίρνουμε αυτόν τον αριθμό από τη συλλογή μας:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.textContent += map.get(this);
	});
}

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

Δίνονται πεδία εισόδου. Σε κάθε πεδίο εισόδου μπορεί να εισαχθεί ένας αριθμός. Ας γίνει έτσι ώστε με πάτημα του Enter το πεδίο εισόδου να απομνημονεύει τον εισαγόμενο αριθμό. Κάντε έτσι, ώστε με απώλεια εστίασης στο πεδίο εισόδου, στην κονσόλα να εκτυπώνεται ο πίνακας όλων των αριθμών που είχαν εισαχθεί προηγουμένως στο πεδίο εισόδου.