Aplicação de coleções Map

Suponha que temos os seguintes parágrafos:

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

Vamos fazer com que, ao clicar em cada parágrafo, sua posição ordinal na lista de parágrafos seja adicionada ao final do seu conteúdo. Vamos resolver esta tarefa usando Map.

Vamos começar. Primeiro, vamos obter nossos parágrafos em uma variável:

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

Vamos criar uma nova coleção Map:

let map = new Map;

Vamos preencher nossa coleção de forma que as chaves sejam nossos parágrafos e seus valores sejam as posições ordinais:

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

Vamos percorrer os parágrafos com um loop e adicionar um manipulador de evento de clique neles:

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

Agora, vamos fazer com que, ao clicar, o número de ordem seja adicionado ao final do texto do parágrafo. Para isso, obteremos esse número da nossa coleção:

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

Existem inputs. Percorra esses inputs com um loop e crie uma coleção Map, onde as chaves serão os inputs e os valores serão suas posições ordinais na página. Faça com que, ao clicar em qualquer input, sua value seja preenchida com sua posição ordinal.

Existem inputs. Em cada input, é possível inserir um número. Ao pressionar Enter, o input deve memorizar o número inserido. Faça com que, ao perder o foco, o input exiba no console um array de todos os números anteriormente inseridos nele.