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

Answer 1

I assume you want to do a sum over all selected radio button values on click of eg 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>

Answer 2

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.