Как связать инпут с опцией селекта?

Question

[Vlad_noob]

Есть несколько оберток, внутри которых селект с опциями (одна из опций - 'Телефон') и рядом инпут. Хочу чтобы при выборе опции 'Телефон' можно было вводить только цифры. В моем коде первой опцией как раз стоит 'Телефон', но оно не работает корректно при первом запуске страницы, приходится перещелкивать на другую опцию и потом назад на 'Телефон' чтобы заработало, при этом после таких махинаций вообще всегда будет возможность вводить только цифры при любой выбранной опции.

Весь JS украл у нейросети, сам как сделать не знаю. Памагити.
https://codepen.io/Vlad096/pen/gOygpLo

Answer 1

[Andrew Dry]

В реальной жизни номер телефона состоит не только из цифр, там есть ещё и скобки, дефисы...

const allSelects = document.querySelectorAll('.contactType');

function toggleInputType(selectElement) {
  const inputElement = selectElement.parentElement.querySelector('.contactDescr');
  inputElement.type = selectElement.value === 'tel'
    ? 'tel'
    : 'text';
}

for (const select of allSelects) {
  select.addEventListener('change', () => {
    toggleInputType(select)
  });
}