Utilisation des collections Map

Supposons que nous ayons des paragraphes :

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

Faisons en sorte qu'en cliquant sur chaque paragraphe, son numéro d'ordre dans la liste des paragraphes soit écrit à la fin. Résolvons la tâche via Map.

Commençons. Pour commencer, mettons nos paragraphes dans une variable :

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

Créons une nouvelle collection Map :

let map = new Map;

Remplissons notre collection de sorte que les clés soient nos paragraphes, et leurs valeurs - les numéros d'ordre :

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

Parcourons les paragraphes avec une boucle et attachons-leur un gestionnaire de clic :

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

Maintenant, au clic, ajoutons le numéro d'ordre à la fin du texte du paragraphe. Ce faisant, nous obtiendrons ce numéro à partir de notre collection :

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

Des champs de saisie sont donnés. Parcourez ces champs avec une boucle et créez une collection Map, dont les clés seront les champs de saisie, et la valeur - leur numéro d'ordre sur la page. Faites en sorte qu'en cliquant sur n'importe quel champ, son numéro d'ordre soit inscrit dans sa value.

Des champs de saisie sont donnés. Dans chaque champ, on peut saisir un nombre. Supposons que lors de l'appui sur Entrée, le champ mémorise le nombre saisi. Faites en sorte qu'à la perte du focus sur le champ, dans la console soit affiché le tableau de tous les nombres précédemment saisis dans ce champ.