0

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

<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() ?

3
  • "но при запуске скрипта сразу же выдаёт значение NaN, так как инпуты не выбраны." --- так сделайте выбранными по умолчанию что-то..... вам же это нужно обязательно по условию... так что зачем кота за хвост тянуть? 19 янв в 15:17
  • NaN возникает, т.к. вы undefined умножаете на undefined. А undefined, потому как ваши фукнкции ничего не возвращают.
    – SwaD
    19 янв в 15:17
  • @SwaD функции возвращают же значения инпутов. Проблема как я понимаю в том, что когда DOM загружается, инпуты пустые
    – v0ndelpark
    19 янв в 15:20

1 ответ 1

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, так как инпуты не выбраны."

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

2
  • спасибо, ваш код работает! Выбранными по умолчанию не нужно, так как пользователь сам должен выбрать, и ему считается результат)
    – v0ndelpark
    19 янв в 15:34
  • @v0ndelpark да. но суть же в том, чтобы пользователь обязательно выбрал один инпут из одного блока и один из другого. Правильно? Если он не выбирает два - то это неправильно. Разве нет? 19 янв в 15:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.