隐藏 div 使用 javascripting DOM 脚本取决于单选按钮的总和

Question

下午好，我想（如标题所说）根据我的单选按钮值的总和隐藏我的 div 标签。我不能仅使用查询 DOM 脚本代码很长，所以我希望你能帮助我。非常感谢

<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>

Answer 1

请在提交问题前测试您的代码。如果您测试代码，您可以在控制台中清楚地看到错误。

Uncaught SyntaxError: Unexpected token )

你有几个问题。

1)

for(var i=0;i<allDiv.i++){

有一个错误的点。代码应该是：

for(var i=0;i<allDiv;i++){

2)

} else {ansD.value>25){

缺少 IF 和 (。应该是：

} else if (ansD.value>25){

3)

另外，这个for没有关闭：

for(var i=0;i<allDiv;i++){
 currentDiv=myDiv[i];

应该是：

for(var i=0;i<allDiv;i++){
 currentDiv=myDiv[i];
 }

4)

然后我得知函数 addNumber 不存在，但我相信那是因为您有一个加载该函数的外部脚本。如果您修改它，那么代码将起作用。

Uncaught ReferenceError: addNumber is not definedonclick @ test.html:100

干杯

编辑：

只重写代码会更容易。在这里，在提交时使用此函数代替 addNumbers 并丢失 addNumber。如果您在加载页面后立即删除样式显示应该会更好。研究函数以了解其工作原理。

<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>

Answer 2

我删除了所有未使用的代码，只留下 addNumbers 函数。我还删除了每个按钮上的事件 - 没有这样的功能。

我总结了所有选中的单选按钮，因此如果页面上有其他单选按钮，您可能需要更具体的选择器。

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>

隐藏 div 使用 javascripting DOM 脚本取决于单选按钮的总和

hide div using javascripting DOM scripting depending on the sum of radio buttons

javascript

function

radio-button

hide