JS не реагирует на смену input с cheked

Question

У меня есть 4 "тарифа" c input типом radio (у первого input стоит checked). Мне нужно, чтобы при смене checked на другой input переменная принимала value чекнутого инпута. У меня при загрузке страницы в консоль уходит value чекнутого первого инпута, но при клике на другой input значение нового чекнутого инпута в консоль не выводится.

                    <div class="checkbox-wrapper__tarifs">
                        <label id="pr190">
                            .calc-tarif
                                //Инф-ция
                            <input  id="val190" type="radio" class="modern-radio" value="190" name="calc-radio" checked>
                        </label>
                        <label>
                            .calc-tarif
                            <input type="radio" class="modern-radio" value="450" name="calc-radio">
                        </label>
                    </div>
                    <script>
                        const fruits = document.querySelectorAll('input[name="calc-radio"]')
                        for (const f of fruits) {
                           if (f.checked) {
                             console.log(f.value)
                                          }
                        }
                    </script>

Answer 1

"значение нового чекнутого инпута в консоль не выводится"

Нужно повесить слушатель события change...

const fruits = document.querySelectorAll('input[name="calc-radio"]');

fruits.forEach(e => {
  e.addEventListener('change', function() {
    console.log(this.value)
  })
})

<div class="checkbox-wrapper__tarifs">
  <label id="pr190">
                            .calc-tarif
                                //Инф-ция
<input  id="val190" type="radio" class="modern-radio" value="190" name="calc-radio" checked>
</label>
  <label>
                            .calc-tarif
<input type="radio" class="modern-radio" value="450" name="calc-radio">
</label>
</div>

Answer 2

Надо использовать событие на изменения радио:

const fruits = document.querySelectorAll('input[name="calc-radio"]')
let selectedValue;

for (const f of fruits) {
    f.addEventListener('change', (event) => {
        selectedValue = event.target.value;
        console.log(selectedValue);
    });
}

БЛОГ НА HUSL

JS не реагирует на смену input с cheked

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