# Map collections applying

Let's have paragraphs:

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

Let's make it so that when you click on each paragraph, its ordinal number in the list of paragraphs is written at the end of it. Let's solve the problem through `Map`.

Let's get started. First, let's get our paragraphs into a variable:

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

Let's create a new `Map` collection:

`let map = new Map;`

Fill in our collection so that the keys are our paragraphs, and their values are ordinal numbers:

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

Let's go through the paragraphs in a loop and hang a click handler on them:

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

Let's now add an ordinal number to the end of the paragraph text on click. In this case, we will obtain this number from our collection:

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

Inputs are given. Iterate over these inputs and create a `Map` collection, in which keys are the inputs, and a value is their ordinal number on the page. Make it so that when you click on any input, its ordinal number is written to its `value`.

Inputs are given. You can enter a number into each input. Let by pressing `Enter` the input remembers the entered number. Make it so that when focus is lost in the input, an array of all the numbers entered earlier in the input is displayed in the console.

←→
↑
en ru