Question

下午好，我希望（如标题所示）隐藏我的div标签，具体取决于我的单选按钮值的总和。我不能只使用查询DOM脚本代码很长，所以我希望你能帮助我。非常感谢

<div class="container">
    <div class="row">
        <div class="thumbnail col-md-6">
            <h3><a href="#">Title</a>
            <p>Some Text</p>
        </div>
        <div class="thumbnail col-md-6">
            <h3><a href="#">Title</a>
            <p>Some Text</p>
        </div>
    </div>
</div>

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(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函数。我还删除了每个按钮上的事件 - 没有这样的功能。

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

p = &std::cout

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

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

2 个答案: