CODEWITHSUNDEEP
javascripthtmlradio-buttonchecked
Diogo Castro
Diogo Castro

Reputation: 19

Counting values from HTML radio buttons in Javascript

I have a form/questionnaire where the user must choose various options in HTML. Javascript will then add up all the options; there are more forms that will be added up to create a grand total. I know that I need to use parseInt and various if statements: if option 1 is selected, return value if option 2 is selected, return value and so on..

HTML:

<input type="radio" name="age" id= "age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id= "age2" value="5"> 26-40<br>
<input type="radio" name="age" id= "age3" value="8"> 41-60<br>
<input type="radio" name="age" id= "age4" value="10"> 60+<br>

Javascript:

calculateAge () {
    var age = parseInt (document.getElementById('age1').value)
    if (age = checked)  return age;
    console.log('age')
}

Upvotes: 0

Views: 1630

Answers (2)

connexo
connexo

Reputation: 56720

I assume you want to do a sum over all selected radio button values on click of e.g. a button.

The core of this apporach is to only select those radio buttons which are checked input[type=radio]:checked. If you have those, it's easy to use Array.prototype.reduce to boil that collection down to the sum.

calc.addEventListener('click', sumToVariable)

var sum;

function sumUp() {
  let sum = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  result.textContent = sum;
  return sum;
}

function sumToVariable() {
  sum = sumUp();
  console.log(sum);
}
body {
  font-size: 10px;
}

#result:not(:empty)::before {
  content: "Sum of selected options: ";
}
<input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
<input type="radio" name="age" id="age2" value="5"> 26-40<br>
<input type="radio" name="age" id="age3" value="8"> 41-60<br>
<input type="radio" name="age" id="age4" value="10"> 60+<br>
<hr />
<input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
<input type="radio" name="age2" id="age20" value="5"> 26-40<br>
<input type="radio" name="age2" id="age30" value="8"> 41-60<br>
<input type="radio" name="age2" id="age40" value="10"> 60+<br>
<hr />
<button type="button" id="calc">Calc</button>
<div id="result"></div>

You could as well do the same on change of a radio button:

radiobuttons.addEventListener('change', () => {
  result.textContent = [...document.querySelectorAll('input[type=radio]:checked')]
    .reduce(
      (acc, val) => acc + Number(val.value)
      , 0
    )
  }
)
body {
  font-size: 10px;
}

#result:not(:empty)::before {
  content: "Sum of selected options: ";
}
<div id="radiobuttons">
  <input type="radio" name="age" id="age1" value="0" checked> 1-25<br>
  <input type="radio" name="age" id="age2" value="5"> 26-40<br>
  <input type="radio" name="age" id="age3" value="8"> 41-60<br>
  <input type="radio" name="age" id="age4" value="10"> 60+<br>
  <hr />
  <input type="radio" name="age2" id="age10" value="0" checked> 1-25<br>
  <input type="radio" name="age2" id="age20" value="5"> 26-40<br>
  <input type="radio" name="age2" id="age30" value="8"> 41-60<br>
  <input type="radio" name="age2" id="age40" value="10"> 60+<br>
</div>
<hr />
<div id="result"></div>

Upvotes: 1

evayly
evayly

Reputation: 850

age = checked

cannot work, because age is an int, and a single equal sign is not used for comparison. Also checked is a property and not a comparable. You could use it like so: 

function calculateAge () {
  let age = parseInt (document.getElementById('age1').value)
  if (document.getElementById('age1').checked)  return age;
  console.log('age')
}

Also you didnt ask a question, assuming you want to know why there is nothing returned.

Upvotes: 0

Related Questions