hide div using javascripting DOM scripting depending on the sum of radio buttons
Question
Good afternoon, I want (as the title says)to hide my div tags depending on the sum of my radio buttons values. I cannot use query only DOM scripting The code is quite long so I hope you could help me. Thanks a lot
<body>
<script>
function checkRadio() {
var selectedAge="";
var selectedBmi="";
var selectedDiabete="";
var description="";
var len = document.row.length;
var i;
function init(){
for (i = 0; i<len; i++) {
if (document.row[i].value);
break;
}
if (selectedAge == "") {
document.getElementByid("radio_error").innnerHTML = "no option selected";
return false
}
else {
document.getElementById("radio_error").innerHTML = "";
return true;
}
}
init();
}
</script>
<script>
function addNumbers()
{
var val1 = parseInt(document.querySelector('input[name = "selectedAge"]:checked').value);
var val2 = parseInt(document.querySelector('input[name = "selectedBmi"]:checked').value);
var val3 = parseInt(document.querySelector('input[name = "selectedDiabete"]:checked').value);
var val4 = parseInt(document.querySelector('input[name = "description"]:checked').value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2 + val3 + val4;
}
</script>
<script>
var myDiv=document.getElementsByTagName('div');
var allDiv=myDiv.length;
for(var i=0;i<allDiv.i++){
currentDiv=myDiv[i];
if (ansD.value<=15){
div[0].style.display = 'block';
div[1].style.display = 'none';
div[2].style.display = 'none'
} else if (ansD.value<=25){
div[0].style.display = 'none';
div[1].style.display = 'block';
div[2].style.display = 'none';
} else {ansD.value>25){
div[0].style.display = 'none';
div[1].style.display = 'none';
div[2].style.display = 'block';
}
</script>
<table>
<tr>
<th scope="col"></th>
<th scope="col">noRisk</th>
<th scope="col">lowRisk</th>
<th scope="col">mediumRisk</th>
<th scope="col">HighRisk</th>
</tr>
<tr>
<th scope="row"><div class="lefttext">How old are you?</div></th>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="0"checked>1-25</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="5">26-40</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="8">41-60</td>
<td><input type="radio" id="value1" name="selectedAge" onclick="addNumber(val1)" value="10">1-25</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">What is you BMI?</div></th>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0" checked>0-25</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="0">26-30</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="9">31-35</td>
<td><input type="radio" id="value2" name="selectedBmi" onclick="addNumber(val2)" value="10">35+</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">Does anybody in your family have diabetes?</div></th>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="0" checked>No</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="7">Grandparent</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Sibling</td>
<td><input type="radio" id="value3" name="selectedDiabete" onclick="addNumber(val3)" value="15">Parent</td>
</tr>
<tr>
<th scope="row"><div class="lefttext">How would you describe your diabete</div></th>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0" checked >Low sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="0">Normal sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="7">Quite high sugar</td>
<td><input type="radio" id="value4" name="description" onclick="addNumber(val4)" value="10">High sugar</td>
</tr>
</table>
<input type="button" name="submit" value="Submit" onclick="javascript:addNumbers()"/>
Total = <input type="text" id="answer" name="answer" value=""/>
<section>
<h2>Your results:</h2>
<div id="lowResult">
<p> Your results show that you currently have a low risk of
developing diabetes. However, it is important that you
maintain a healthy lifestyle in terms of diet and exercise.
</p>
</div>
<div id="mediumResult">
<p>Your results show that you currently have a medium risk of
developing diabetes. For more information on your risk
factors, and what to do about them, please visit our diabetes
advice website at <a href="http://www.zha.org.zd">http://www.zha.org.zd</a>.
<p>
</div>
<div id="highRisk">
<p>Your results show that you currently have a HIGH risk of
developing diabetes. [Your main risk factors are your BMI and
your diet.] We advise that you contact the Health Authority to
discuss your risk factors as soon as you can. Please fill in our
contact form and a member of the Health Authority Diabetes
Team will be in contact with you.
</div>
</section>
</body>
2 answers
solution1
1 2015-07-31 15:41:29
Please test your code before submitting a question. If you test the code you can clearly see an error in the console.
Uncaught SyntaxError: Unexpected token )
You have several problems.
1)
for(var i=0;i<allDiv.i++){
There is a wrong dot. The code should be:
for(var i=0;i<allDiv;i++){
2)
} else {ansD.value>25){
Missing an IF and (. Should be:
} else if (ansD.value>25){
3)
Also, this for is not closed:
for(var i=0;i<allDiv;i++){
currentDiv=myDiv[i];
Should be:
for(var i=0;i<allDiv;i++){
currentDiv=myDiv[i];
}
4)
Then i get that the function addNumber does not exist but I believe that is because you have an external script loading that function. If you modify that, then the code will work.
Uncaught ReferenceError: addNumber is not definedonclick @ test.html:100
Cheers
EDIT:
It will be easier to just rewrite the code. Here, use this function instead of addNumbers on the submit and lose the addNumber. It should be better if you remove the style display as soon as you load the page. Study the function to see how it works.
<script>
function showResult(){
var val1 = parseInt(document.querySelector('input[name = "selectedAge"]:checked').value);
var val2 = parseInt(document.querySelector('input[name = "selectedBmi"]:checked').value);
var val3 = parseInt(document.querySelector('input[name = "selectedDiabete"]:checked').value);
var val4 = parseInt(document.querySelector('input[name = "description"]:checked').value);
var result = val1 + val2 + val3 + val4;
var ansD = document.getElementById("answer");
ansD.value = result;
var divLow = document.getElementById("lowResult");
var divMedium = document.getElementById("mediumResult");
var divHigh = document.getElementById("highRisk");
divLow.style.display = 'none';
divMedium.style.display = 'none';
divHigh.style.display = 'none';
if (result < 15){
divLow.style.display = 'block';
} else if (result < 25){
divMedium.style.display = 'block';
} else {
divHigh.style.display = 'block';
}
console.log(result);
}
</script>
solution2
1 ACCPTED 2015-07-31 16:15:03
I have removed all unused code and left only addNumbers function. I have also removed events on each button - no such function.
I sum over all checked radio buttons so if you have other on the page you probably need more specific selector.
function addNumbers() { var selectedRadios = document.querySelectorAll('input[type="radio"]:checked'); var sum = 0; for (var i = 0; i < selectedRadios.length; i++) { sum += parseInt(selectedRadios[i].value); } document.getElementById('answer').value = sum; var showDiv = sum < 15 ? "lowResult" : (sum < 25 ? "mediumResult" : "highRisk"); document.getElementById(showDiv).style.display = 'block'; }
.results { display: none; }
<table> <tr> <th scope="col"></th> <th scope="col">noRisk</th> <th scope="col">lowRisk</th> <th scope="col">mediumRisk</th> <th scope="col">HighRisk</th> </tr> <tr> <th scope="row"> <div class="lefttext">How old are you?</div> </th> <td> <input type="radio" id="value1" name="selectedAge" value="0" checked>1-25</td> <td> <input type="radio" id="value1" name="selectedAge" value="5">26-40</td> <td> <input type="radio" id="value1" name="selectedAge" value="8">41-60</td> <td> <input type="radio" id="value1" name="selectedAge" value="10">1-25</td> </tr> <tr> <th scope="row"> <div class="lefttext">What is you BMI?</div> </th> <td> <input type="radio" id="value2" name="selectedBmi" value="0" checked>0-25</td> <td> <input type="radio" id="value2" name="selectedBmi" value="0">26-30</td> <td> <input type="radio" id="value2" name="selectedBmi" value="9">31-35</td> <td> <input type="radio" id="value2" name="selectedBmi" value="10">35+</td> </tr> <tr> <th scope="row"> <div class="lefttext">Does anybody in your family have diabetes?</div> </th> <td> <input type="radio" id="value3" name="selectedDiabete" value="0" checked>No</td> <td> <input type="radio" id="value3" name="selectedDiabete" value="7">Grandparent</td> <td> <input type="radio" id="value3" name="selectedDiabete" value="15">Sibling</td> <td> <input type="radio" id="value3" name="selectedDiabete" value="15">Parent</td> </tr> <tr> <th scope="row"> <div class="lefttext">How would you describe your diabete</div> </th> <td> <input type="radio" id="value4" name="description" value="0" checked>Low sugar</td> <td> <input type="radio" id="value4" name="description" value="0">Normal sugar</td> <td> <input type="radio" id="value4" name="description" value="7">Quite high sugar</td> <td> <input type="radio" id="value4" name="description" value="10">High sugar</td> </tr> </table> <input type="button" name="submit" value="Submit" onclick="javascript:addNumbers()" />Total = <input type="text" id="answer" name="answer" value="" /> <section> <h2>Your results:</h2> <div class="results" id="lowResult"> <p>Your results show that you currently have a low risk of developing diabetes. However, it is important that you maintain a healthy lifestyle in terms of diet and exercise. </p> </div> <div class="results" id="mediumResult"> <p>Your results show that you currently have a medium risk of developing diabetes. For more information on your risk factors, and what to do about them, please visit our diabetes advice website at <a href="http://www.zha.org.zd">http://www.zha.org.zd</a>. <p> </div> <div class="results" id="highRisk"> <p>Your results show that you currently have a HIGH risk of developing diabetes. [Your main risk factors are your BMI and your diet.] We advise that you contact the Health Authority to discuss your risk factors as soon as you can. Please fill in our contact form and a member of the Health Authority Diabetes Team will be in contact with you. </div> </section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show / Hide div depending on radio and checkbox buttons
hide and show element depending of the value of radio-button using dom scripting javascript
Show / Hide div depending on radio and checkbox buttons exclusively
Show/hide textfile depending on radio buttons' selection
Using Radio Buttons to hide div's with multiple layers
three radio buttons with sub radio buttons need to hide or show the div using jquery
Multiple radio buttons to show/hide div
Hide/Show div via Radio Buttons
Display a div using a radio buttons
How to hide elements depending on the state of radio buttons with Javascript
Related Tags