Употреба на 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);
	});
}

Дадени се input полиња. Поминете ги овие input полиња со циклус и креирајте колекција Map, каде што клучеви ќе бидат input полињата, а вредноста - нивниот редоследен број на страницата. Направете така, што при клик на кое било input поле во неговиот value да му се запише неговиот редоследен број.

Дадени се input полиња. Во секое input поле може да се внесе број. Нека при притискање на Enter input полето да го запамети внесениот број. Направете така, што при загуба на фокусот во input полето во конзола да се испечати низа од сите дотогаш внесени во input полето броеви.