Задача на использование коллекции Map

Question

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

let inputs = document.querySelectorAll('input')
let map = new Map;
for(let input of inputs){   
    let map = new Map;
    let i=1
        input.addEventListener('keydown',function(event){   
            if(event.code === 'Enter' || event.code === 'NumpadEnter' ){    

            map.set(i++,this.value);            
            this.value = '';
            
            input.addEventListener('blur',()=>{
                console.log([...map.values()])
            })  
            }                   
    })      
    }

Answer 1

Если вы хотите, чтобы в качестве ключа в Map был индекс, то его лучше вынести за пределы цикла иначе у вас в Map будет столько же элементов, сколько и инпутов. Так же у вас в обработчике события keydown постоянно создаются новые слушатели события blur, его тоже нужно вынести отдельно.

Если я правильно понял, то должно работать как-то так:

let inputs = document.querySelectorAll('input')
let map = new Map();

let index = 0;
for(let input of inputs) {
  input.addEventListener('keydown', function(event) {   
     if (event.code !== 'Enter' && event.code !== 'NumpadEnter' ) return; 
     map.set(index, this.value);
     index++;
     this.value = '';                    
  });
  input.addEventListener('blur', ()=> {
    console.log([...map.values()])
  });
}

<input type="number" value=""></input>
<input type="number" value=""></input>

БЛОГ НА HUSL

Задача на использование коллекции Map

Ответы (1 шт):