Как повесить один обработчик событий на несколько инпутов?

Question

Есть 4 инпута. На них нужно повесить одинаковый обработчик событий. Написал код ,но что-то делаю не правильно при фокусе на инпуте выдаёт ошибку. "Uncaught TypeError: inp[i] is undefined" По логике перебираю все элементы и на каждый вешаю обработчик события, но не работает. Как правильно повесить один обработчик на несколько инпутов?

                        <input minlength="8" type="text" class="catalogNumber" placeholder="Введите Ваш номер телефона">

let inp = document.querySelectorAll('.catalogNumber');



for (var i = 0; i < inp.length; i++) {
  inp[i].addEventListener('focus', _ => {
    if(!/^\+\d*$/.test(inp[i].value))
      inp[i].value = '+';
  });
  inp[i].addEventListener('keypress', e => {
    if(!/\d/.test(e.key))
      e.preventDefault();
  });
}

<input class="catalogNumber" placeholder="Введите Ваш номер телефона">
<input class="catalogNumber" placeholder="Введите Ваш номер телефона">
<input class="catalogNumber" placeholder="Введите Ваш номер телефона">
<input class="catalogNumber" placeholder="Введите Ваш номер телефона">

Answer 1

Вот так попробуй.

let inp = document.querySelectorAll('.catalogNumber');

inp.forEach((item)=>{
   item.addEventListener('focus', _ => {
    if(!/^\+\d*$/.test(item.value))
      item.value = '+';
  });
  item.addEventListener('keypress', e =>      {
    if(!/\d/.test(e.key))
      e.preventDefault();
  });
});

БЛОГ НА HUSL

Как повесить один обработчик событий на несколько инпутов?

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