Použití kolekcí Map

Předpokládejme, že máme odstavce:

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

Udělejme to, aby po kliknutí na každý odstavec se na jeho konec zapsalo jeho pořadové číslo v seznamu odstavců. Úlohu vyřešíme pomocí Map.

Pojďme na to. Nejprve získejme naše odstavce do proměnné:

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

Vytvořme novou kolekci Map:

let map = new Map;

Vyplňme naši kolekci tak, aby klíči byly naše odstavce a jejich hodnotami - pořadová čísla:

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

Projděme odstavce cyklem a přidejme jim obslužnou rutinu kliknutí:

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

Nyní po kliknutí přidejme pořadové číslo na konec textu odstavce. Přitom budeme získávat toto číslo z naší kolekce:

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

Jsou dány inputy. Projděte tyto inputy cyklem a vytvořte kolekci Map, jejíž klíči budou inputy a hodnotou - jejich pořadové číslo na stránce. Zařiďte, aby po kliknutí na jakýkoli input se mu do value zapsalo jeho pořadové číslo.

Jsou dány inputy. Do každého inputu lze zadat číslo. Nechť po stisknutí Enter input zapamatuje zadané číslo. Zařiďte, aby po ztrátě fokusu v inputu se do konzole vypisovalo pole všech dříve zadaných čísel.