根据单选按钮的总和使用javascript DOM脚本隐藏div
[英]hide div using javascripting DOM scripting depending on the sum of radio buttons
问题描述
Good afternoon, I want (as the title says)to hide my div tags depending on the sum of my radio buttons values. 
午安，我想（如标题所示）根据我的单选按钮值的总和隐藏div标签。 I cannot use query only DOM scripting The code is quite long so I hope you could help me. 我不能仅使用查询DOM脚本该代码很长，因此希望您能对我有所帮助。 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 个解决方案
解决方案1
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) 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) 2）
} else {ansD.value>25){
Missing an IF and (. Should be: 缺少IF和（。应为：
} else if (ansD.value>25){
3) 3）
Also, this for is not closed: 另外，此for尚未关闭：
for(var i=0;i<allDiv;i++){
currentDiv=myDiv[i];
Should be: 应该：
for(var i=0;i<allDiv;i++){
currentDiv=myDiv[i];
}
4) 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. 然后我得到函数addNumber不存在，但是我相信这是因为您有一个加载该函数的外部脚本。 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. 在此，使用此函数代替提交上的addNumbers并丢失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>
解决方案2
1 已采纳 2015-07-31 16:15:03
I have removed all unused code and left only addNumbers function. 我删除了所有未使用的代码，只剩下addNumbers函数。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示/隐藏div，取决于单选和复选框按钮 - Show / Hide div depending on radio and checkbox buttons
隐藏和显示元素，取决于使用dom脚本javascript的单选按钮的值 - hide and show element depending of the value of radio-button using dom scripting javascript
仅根据单选和复选框按钮显示/隐藏 div - Show / Hide div depending on radio and checkbox buttons exclusively
根据单选按钮的选择显示/隐藏文本文件 - Show/hide textfile depending on radio buttons' selection
使用单选按钮隐藏具有多个图层的 div - Using Radio Buttons to hide div's with multiple layers
三个带有子单选按钮的单选按钮需要使用jquery隐藏或显示div - three radio buttons with sub radio buttons need to hide or show the div using jquery
显示/隐藏 div 的多个单选按钮 - Multiple radio buttons to show/hide div
通过单选按钮隐藏/显示div - Hide/Show div via Radio Buttons
使用单选按钮显示div - Display a div using a radio buttons
如何使用Javascript根据单选按钮的状态隐藏元素 - How to hide elements depending on the state of radio buttons with Javascript
相关标签