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

Question

Есть некая форма с инпутами, у всех разное значение, и пустой блок для вывода результата:

<form>
<input type="radio" value="2" name="one">
<input type="radio" value="3" name="one">

<input type="radio" value="4" name="two">
<input type="radio" value="5" name="two">
</form>

<div id="total"></div>

Нужно чтобы в блоке id="total" отображалось произведение значений выбранных инпутов. Написал такой код js:

function firstStep(){
let one = document.querySelectorAll('input[name=one]');
 [...one].map(el => {el.addEventListener('change', function() { 
 return el.value;   
  });
});
};

function secondStep(){
let two = document.querySelectorAll('input[name=two]');
 [...two].map(el => {el.addEventListener('change', function() { 
 return el.value;   
  });
});
};

function total(){
 return document.getElementById('total').innerHTML = firstStep() * secondStep();
}

total();

но при запуске скрипта сразу же выдаёт значение NaN, так как инпуты не выбраны. Что нужно сделать, чтобы функция total() выполнялась после того, как пользователь выберет инпуты? И можно ли записать как-то попроще функции firstStep() и secondStep() ?

Answer 1

document.querySelectorAll("input[type=radio]").forEach(el => {
  el.addEventListener('click', total);
});

function total() {
  let one = document.querySelector("input[name=one]:checked")?.value ?? 0;
  let two = document.querySelector("input[name=two]:checked")?.value ?? 0;

  console.log(one * two)
}

<form>
  <input type="radio" value="2" name="one">
  <input type="radio" value="3" name="one">

  <input type="radio" value="4" name="two">
  <input type="radio" value="5" name="two">
</form>

<div id="total"></div>

но при запуске скрипта сразу же выдаёт значение NaN, так как инпуты не выбраны."

Сделайте выбранными по умолчанию что-то (например каждый первый инпут в блоке). Вам же нужно, чтобы пользователь обязательно выбрал что-то и там и там. Так зачем кота за хвост тянуть?

БЛОГ НА HUSL

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

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