Counting values from HTML radio buttons in Javascript

Question

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')
}

You can simply let the appropriate CSS selector do the job of finding the checked elements (see my answer). This way you don't have to check each and every radio button whether it is checked or not. — connexo
– connexo, Commented Jan 13, 2019 at 14:04

connexo · Accepted Answer · 2019-01-13 15:36:43Z

1

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>

edited Jan 13, 2019 at 15:36

answered Jan 13, 2019 at 13:55

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Diogo Castro Over a year ago

this first option is great and it works, but i will need to output certain messages depending on the result. as it stands, i dont know how to use that result to do this. can it be turned into a variable?

connexo Over a year ago

Sure, just return the result of the reduce function. I'll edit the first variant.

evayly · Accepted Answer · 2019-01-13 12:58:52Z

0

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.

edited Jan 13, 2019 at 12:58

answered Jan 13, 2019 at 12:51

evayly

8507 silver badges19 bronze badges

1 Comment

Diogo Castro Over a year ago

apologies for the lack of question. thanks, i believe this is what I was looking for.

Collectives™ on Stack Overflow

Counting values from HTML radio buttons in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related