Utilizzo delle Collezioni Map

Supponiamo di avere questi paragrafi:

html<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:

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

Creiamo una nuova collezione Map:

javascriptlet map = new Map;

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

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

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

javascriptfor (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:

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