Loop through questions with 4 radio buttons each to calculate a value with Javascript

JavaScript
1 

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Diabetes Risk Assessment Tool</title>
<!--  <link href="diabetestool.css" rel="stylesheet"> --> 
  <script src="diabetestool.js"></script>  
</head>
<body>

<h1>The Diabetes Risk Assessment Tool</h1>
<form id="risk-assessment" action="contactform.html" formnovalidate>
  <p><i>Please complete the form. Choose an option for each question </i><em>*</em></p>
  <fieldset>
    <legend>Questions</legend>
    <!-- Age --> 
      <label for="age">How old are you? <em>*</em></label>
      <input type="radio" value="0" name="age" id="0-25" checked><label for="0-25">0-25</label>
      <input type="radio" value="5" name="age" id="26-40"><label for="26-40">26-40</label>
      <input type="radio" value="8" name="age" id="41-60"><label for="41-60">41-60</label>
      <input type="radio" value="10" name="age" id="60+"><label for="60+">60+</label><br>
   <!-- BMI -->           
      <label for="bmi">What is your BMI? <em>*</em></label>
      <input type="radio" value="0" name="bmi" id="0-25" checked><label for="0-25">0-25</label>
      <input type="radio" value="0" name="bmi" id="26-30"><label for="26-30">26-30</label>
      <input type="radio" value="9" name="bmi" id="31-35"><label for="31-35">31-35</label>
      <input type="radio" value="10" name="bmi" id="35+"><label for="35+">35+</label><br>
   <!-- Genetics -->     
      <label for="genetics">Does anybody in your family have diabetes? <em>*</em></label>
      <input type="radio" value="0" name="genetics" id="0-25" checked><label for="no">No.</label>
      <input type="radio" value="7" name="genetics" id="grandparent"><label for="grandparent">Grandparent</label>
      <input type="radio" value="15" name="genetics" id="sibling"><label for="sibling">Sibling</label>
      <input type="radio" value="15" name="genetics" id="parent"><label for="parent">Parent</label><br>
   <!-- Diet -->     
      <label for="diet">How would you describe your diet? <em>*</em></label>
      <input type="radio" value="0" name="diet" id="low-sugar" checked><label for="low-sugar">Low-sugar</label>
      <input type="radio" value="0" name="diet" id="normal-sugar"><label for="normal-sugar">Normal sugar</label>
      <input type="radio" value="7" name="diet" id="quite-highs-sugar"><label for="quite-highs-sugar">Quite high sugar</label>
      <input type="radio" value="10" name="diet" id="high-sugar"><label for="high-sugar">High sugar</label><br>
   <!-- Calculate -->     
       <p><input type="submit" value="Calculate" id=calculate></p>   
  </fieldset>
  <div id="display-message"></div>
</form>
</body>

If there was only one question, the way to get values is somthing like this (although there’s something not working in the last line):


  
function
  
    var age = document.getElementById("risk-assessment").age,
    var ageValue; 
    for (var i = 0; i < age.length; i++){
        if (age[i].checked == true){
            ageValue=age[i].value; 
        }
    }

But I don’t know how to make the loop go over the other questions.

It could be an array that has the references to the other question names and then a nested loop for example.

It could also be with forEach and apply a function to each question.

But I don’t know how to write it as I’m learning.

Thanks a lot!

2

By the way, I only want to use getElementById as this is multi-browser, not like getElementByClassName or TagName.

3

Hi there,

Probably not what you want to hear, but ids must be unique to a page.

So, you can’t have this:

<input type="radio" value="0" name="age" [B]id="0-25"[/B] checked>

this:

<input type="radio" value="0" name="bmi"[B] id="0-25"[/B] checked>

and this:

<input type="radio" value="0" name="genetics" [B]id="0-25"[/B] checked>

Also, ids shouldn’t start with a number.
Class identifiers are allowed to, but ID identifiers are not.

What browsers do you want to support then?

The way to go is getElementsByTagName, which is supported as far back as IE 6.
http://quirksmode.org/dom/core/#t12

If you can use that, here is how you can do what you want:

function calculateTotal(){
    var total = 0,
        i;
    
    for (i = 0; i < radios.length; i++) {
        if (radios[i].type == 'radio' && radios[i].checked) {
            total += Number(radios[i].value);
        }
    }
       
    result.innerHTML = total;
    return false; 
}

var radios = document.getElementsByTagName("input"),
    result = document.getElementById("display-message");

document.forms[0].onsubmit = calculateTotal;

Demo

4

Thanks, that’s the style of code I like.

Now, if I want to try to get/set the radios through the console to test the properties/ methods you used, I try:

document.getElementById(“risk-assessment”).type

// returns undefined. Fine.

document.getElementsByTagName(“input”).type

// returns undefined. Fine.

But how do I get the radios selected?

If I write:

document.getElementsByTagName(“input”).type.checked

// Returns: TypeError: document.getElementsByTagName(…).type is undefined

Also, a question about your code: what does return false do here?

Thanks in advance.

5

Hi,

Assign the result to a variable:

> var f = document.getElementById("risk-assessment");
undefined

> f
<form id="risk-assessment" action="contactform.html" formnovalidate="">...</form>

In the same way:

> var i = document.getElementsByTagName("input");
undefined

> i
[
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"age" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"5" name=&#8203;"age" id=&#8203;"26-40">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"8" name=&#8203;"age" id=&#8203;"41-60">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"10" name=&#8203;"age" id=&#8203;"60+">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"bmi" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"bmi" id=&#8203;"26-30">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"9" name=&#8203;"bmi" id=&#8203;"31-35">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"10" name=&#8203;"bmi" id=&#8203;"35+">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"genetics" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"7" name=&#8203;"genetics" id=&#8203;"grandparent">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"15" name=&#8203;"genetics" id=&#8203;"sibling">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"15" name=&#8203;"genetics" id=&#8203;"parent">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"diet" id=&#8203;"low-sugar" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"diet" id=&#8203;"normal-sugar">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"7" name=&#8203;"diet" id=&#8203;"quite-highs-sugar">&#8203;, 
<input type=&#8203;"radio" value=&#8203;"10" name=&#8203;"diet" id=&#8203;"high-sugar">&#8203;, 
<input type=&#8203;"submit" value=&#8203;"Calculate" id=&#8203;"calculate">&#8203;
]

Use querySelectorAll

> var i = document.querySelectorAll("input:checked");
undefined

> i
[
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"age" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"bmi" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"genetics" id=&#8203;"0-25" checked>&#8203;, 
<input type=&#8203;"radio" value=&#8203;"0" name=&#8203;"diet" id=&#8203;"low-sugar" checked>&#8203;
]

Prevents the form’s default action (submission) from taking place.

HTH