Utilizzo delle Collezioni Map

Supponiamo di avere questi paragrafi:

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

Facciamo in modo che cliccando su ogni paragrafo, alla sua fine venga scritto il suo numero progressivo nell'elenco dei paragrafi. Risolviamo il problema utilizzando Map.

Iniziamo. Per prima cosa otteniamo i nostri paragrafi in una variabile:

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

Creiamo una nuova collezione Map:

let map = new Map;

Riempiamo la nostra collezione in modo che le chiavi siano i nostri paragrafi, e i loro valori - i numeri progressivi:

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

Iteriamo i paragrafi con un ciclo e assegniamo loro un gestore di click:

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

Ora, al click, aggiungiamo il numero progressivo alla fine del testo del paragrafo. In questo modo otterremo questo numero dalla nostra collezione:

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

Sono dati degli input. Iterate questi input con un ciclo e create una collezione Map, in cui le chiavi saranno gli input, e il valore - il loro numero progressivo nella pagina. Fate in modo che cliccando su qualsiasi input, nel suo value venga scritto il suo numero progressivo.

Sono dati degli input. In ogni input è possibile inserire un numero. Alla pressione di Enter, l'input deve memorizzare il numero inserito. Fate in modo che alla perdita del focus nell'input, nella console venga visualizzato l'array di tutti i numeri precedentemente inseriti in quell'input.