Отслеживаем значение в input во время фокуса на нем?

Question

[Counter]

Есть n-нное количество input. Они все с одним классом. При каждой загрузке страничке их кол-во разное от 10 до 50. Нужно отследить фокус и значения inputa на котором фокус. Пример ниже не работает

<input class="myinput">
<input class="myinput">
<input class="myinput">
<input class="myinput">
<input class="myinput">
<input class="myinput">
<input class="myinput">

var elem = document.getElementsByClassName('myinput');
    for (var i = 0; i < elem.length; i++) {
        elem[i].id='phonemid' +i;
    };
    setInterval(function() {
    for (var i = 0; i < elem.length; i++) {
        var last = document.getElementById("phonemid" +i);
        last.onfocus = function() {
        var my = elem[i];
        console.log(my.value);};
    };
    }, 300);

Comments

[twobomb]

У меня вопрос что значит отследить значение инпута, и еще зачем вы 3 раза в секунду назначаете обработчик на фокус?

[Counter]

Отследить значение - я кликаю на любой input ввожу туда любую цифру и с каждый изменением input-a мне приходит значение этого input-а в консоль.

Видать я что то не понимаю. Каждый 3 секунды я перебирают все элементы с этим классом, что бы отследить момент когда у инпута появится фокус.

[twobomb]

Counter, Не нужно ничего перебирать.

last.onfocus = function() {
        var my = elem[i];
        console.log(my.value);};
    };

Это значит что на элемент last на событие получение фокуса вы повесили обработчик, он сам слушает и когда произойдет фокус на last вызовет ваш обработчик. Но в чем прикол, допустим инпут получает фокус и отработывает ваш обработчик, он выводит текущее значение с инпута в консоль и заканчивает свою работу, он вызовется в следующий раз только когда вы уберет фокус и опять нажмете на него. А чтобы получать значения при вводе есть событие oninput, хотя есть еще onchange, но это другое. Короче говоря тупо навесьте на все инпуты событие инпут и будет вам счастье.

for(var i =0; i < document.querySelectorAll(".myinput").length;i++)
document.querySelectorAll(".myinput")[i].addEventListener("input",function(){
	console.log(this.value)
},false);

Answer 1

[Владимир]

тык

Answer 2

[coderisimo]

focus ?

https://codepen.io/coderisimo/pen/JpVOGo

Answer 3

[Counter]

var elem = document.getElementsByClassName('myinput');

for (let i = 0; i < elem.length; i++) {
  elem[i].addEventListener('input', function() {
    console.log(this.value, 'this index ' + i);
  })
}

Вот решение которое решает вопрос на 100%. Коллеги со stackoverflow подсказали.