Question

大家好我试图找到一种方法来显示和隐藏id为“answer1”的[你的主要风险因素是你的BMI和你的饮食。]取决于“按钮”类的单选按钮（值优于或等于10）。如果选中该按钮，则应显示消息跨度id“answer1”，否则隐藏跨度id“answer1”。这是我的剧本

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

var text = document.getElementsById("answer1");
var butt = document.getElementsByClassName("button");

window.onload = start();

function start(){
     for (i=0; i<text.length; i++){
        text[i].style.visibility = "hidden";
     };
};

butt[i].onclick = function (){
    if (text[i].style.visibility = "hidden"){
        text[i].style.visibility = "visible";
    } else {
        text[i].style.visibility = "hidden"
    };
};

这里是我的HTML

<!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="diabeteStool.css" >
    <script src="diabeteStool.js"></script>
</head>
<body>
<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 class="button" 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 class="button" 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 class="button" 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 class="button" type="radio" id="value4" name="description" value="10">High sugar</td>
</tr>
</table>
<input type="button" name="submit" value="Submit"   onclick="javascript:addNumbers()" />Total =

<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. <span id="answer1" ">[Your main risk factors are your BMI and your diet.] </span> 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>
</html>

Answer 1

@martin这意味着赋值=，但这意味着要测试值是否相等==（同样===检查类型和值是否相等。

所以你的行

if (text[i].style.visibility = "hidden"){

将忽略text[i].style.visibility的现有值 - 而是将其解释为如果值可以成功设置 - 然后执行if语句。

将其更改为

if (text[i].style.visibility == "hidden"){

顺便说一下，您可以编辑原始问题，在评论中添加该功能。

使用dom脚本javascript隐藏和显示元素取决于单选按钮的值

1 个答案: