# Применение коллекций 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); }); }`

Даны инпуты. Переберите эти инпуты циклом и создайте коллекцию `Map`, ключами в которой будут инпуты, а значением - их порядковый номер на странице. Сделайте так, чтобы по клику на любой инпут ему в `value` записывался его порядковый номер.

Даны инпуты. В каждый инпут можно ввести число. Пусть по нажатию на `Enter` инпут запоминает введенное число. Сделайте так, чтобы по потери фокуса в инпуте в консоль выводился массив всех введенных ранее в инпут чисел.

← →
↑
en ru