Приложение на колекции 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 полето числа.