Как получить значение (value) выбранной радио кнопки по атрибуту name с помощью JS?

Question

[kpa18]

Есть несколько радио кнопок:

<form id="mainForm" name="mainForm">
  <input type="radio" name="rate" value="1"> Раз
  <input type="radio" name="rate" value="2"> Два
  <input type="radio" name="rate" value="3"> Три 
</form>
<span id="result"></span>

Необходимо получить value выбранной радио-кнопки по атрибуту name для дальнейшей работы с ним.
Вот как делаю я:

<script>
                    var text = ["BASIC", "STANDART", "ADVANCED"];
document.querySelector('input[name="rate"]').addEventListener("change", function(){
    if (this.value == 1) {
      document.getElementById('result').innerHTML = text[0]; }
else if (this.value == 2) {
      document.getElementById('result').innerHTML = text[1]; }
      else if (this.value == 3) {
      document.getElementById('result').innerHTML = text[2]; }
});
        </script>

По итогу выводится только самое первое значение, а другие игнорируются... В консоли никаких ошибок не выдает.

Answer 1

[Simkav]

Потому что у вас стоит обработчик только на 1 инпут
querySelector выдаст вам первое найденое совпадение, вам нужно юзать querySelectorAll

Рабочий код, но я бы передалал)

var text = ['BASIC', 'STANDART', 'ADVANCED'];
const inputs = document.querySelectorAll('input[name="rate"]');
inputs.forEach((item) => {
  item.addEventListener('change', function () {
    const {value} = this;
    if (value == 1) {
      document.getElementById('result').innerHTML = text[0];
    } else if (value == 2) {
      document.getElementById('result').innerHTML = text[1];
    } else if (value == 3) {
      document.getElementById('result').innerHTML = text[2];
    }
  });
});

Comments

[kpa18]

Подскажите еще пожалуйста: я раньше использовал селектор вместо радиокнопок для калькулятора roi, как мне поменять данный скрипт:

<form id="mainForm" name="mainForm">
  <input type="radio" name="rate" value="1"> Раз
  <input type="radio" name="rate" value="2"> Два
  <input type="radio" name="rate" value="3"> Три 
<input type="number" name="amount" id="amount> 
</form>
<span id="roi"></span>
<span id="aRR"></span
<span id="mRR"></span>

<script>
const totalCustomerBaseInput = document.querySelector('#amount')
const projectionScenarioInput = document.querySelector('input[name="rate"]')

const mRRContainer = document.querySelector('#mRR')
const aRRContainer = document.querySelector('#aRR')
const roiContainer = document.querySelector('#roi')

totalCustomerBaseInput.addEventListener('keyup', calculateReturns)
projectionScenarioInput.addEventListener('change', calculateReturns)

function calculateReturns (e) {

  const totalCustomers = parseInt(totalCustomerBaseInput.value)
  
  const projectionPercent = parseFloat(projectionScenarioInput.value)
  
  const mRR = totalCustomers / 100 * projectionPercent *30
  const aRR = mRR * 12

  const roi = mRR / 30

  mRRContainer.innerHTML = "$" + mRR.toFixed(2)
  aRRContainer.innerHTML = "$" + aRR.toFixed(2)
  roiContainer.innerHTML = "$" + roi.toFixed(2)
}
             </script>

Чтобы он корректно работал с радио-кнопками сейчас?
Спасибо.

[Simkav]

kpa18, Обясните что должно произойти, что должно получится на выходе и в чем проблема?

[kpa18]

Simkav, выше я написал код калькулятора расчета окупаемости.
Пользователь выбирает одну из опций, раньше они были представлены в селекторе, сейчас хочу представить через радио-кнопки, далее вводит сумму, и калькулятор выдает в зависимости от введенной суммы и выбранной опции различные показатели: roi, aRR, mRR.
Я не могу грамотно и корректно передать value радио-кнопок, с которыми потом работает калькулятор.
Раньше это было просто, тк у селектора всего один id на все его опции:

<select id="option">
          <option value="1.7">start</option>
          <option value="2.3">medium</option>
            <option value="3.3">advanced</option>
            <option value="7">pro</option>
        </select>

и в js value передавалось так:

const projectionScenarioInput = document.querySelector('#option')
// тут обработчик клика по селектору
projectionScenarioInput.addEventListener('change', calculateReturns)
// тут формула расчета
function calculateReturns (e) {

  const totalCustomers = parseInt(totalCustomerBaseInput.value)
  const projectionPercent = parseFloat(projectionScenarioInput.value)
  
  const mRR = totalCustomers / 100 * projectionPercent *30
  const roi = mRR / 30
   if (projectionPercent == 1.7)  {
    aRRContainer.innerHTML ="$" + (totalCustomers + (roi * 15)).toFixed(1)
}
// тут сами расчеты и потом вывод значений

а теперь у меня радио кнопки:

<form id="mainForm" name="mainForm">
  <input type="radio" name="option" value="1"> Раз
  <input type="radio" name="option" value="2"> Два
  <input type="radio" name="option" value="3"> Три 
</form>

И я не могу понять как передать value в js, потому что видит он только самое первое значение value:

const projectionScenarioInput = document.querySelector('input[name="option"]')
projectionScenarioInput.addEventListener('change', calculateReturns)

если использую

const projectionScenarioInput = document.querySelectorAll('input[name="option"]')
projectionScenarioInput.addEventListener('change', calculateReturns)

то получаю ошибку, что не такой функции addEventListener тут:

projectionScenarioInput.addEventListener('change', calculateReturns)