Javascript 函数不使用 if-else 语句运行答案

【问题标题】：Javascript function doesn't run with an if-else statementJavascript 函数不使用 if-else 语句运行
【发布时间】：2022-07-28 23:22:54
【问题描述】：

我有几个复选框：

<input type="checkbox" name="filterby" id="type" value="type" onchange="showFilter();" />Type<br>
<input type="checkbox" name="filterby" id="conseq" value="conseq" onchange="showFilter();" />Consequence<br>
<input type="checkbox" name="filterby" id="group" value="group" onchange="showFilter();" />Group<br>
<input type="checkbox" name="filterby" id="sample" value="sample" onchange="showFilter();" />Sample<br>

和每个 div ，我想在单击时显示和隐藏。这是我的功能：

function showFilter() {
  var filterby = ["type", "conseq", "group", "sample"];

  for (var i = 0; i < filterby.length; i++) {
    var option_on = document.getElementById(filterby[i]).checked;
    var filterby_list = filterby[i] + "_list";

    if (option_on == true) {
      document.getElementById(filterby_list).style.display = "block";
    }
    else {
      document.getElementById(filterby_list).style.display = "none";
    }
  }
}

我已经看了好几个小时了，不知道为什么它不起作用。如果我删除 if-else 语句，它会运行，如果不是，它适用于第一个复选框而不适用于其他复选框，它会在循环第二个复选框时停止。我的错误在哪里？

谢谢。

【问题讨论】：

什么是filterby_list？
如果在调试器中单步执行会发生什么？我的猜测是 if 语句正在崩溃并且停止脚本。

标签： javascript

【解决方案1】：

如果我添加具有您的脚本期望的正确 ID 的 div，您的代码就可以工作。所以你的问题不在于显示的代码。您的 HTML 是否包含您要显示和隐藏的 div 的正确 id 值？

function showFilter() {
  var filterby = ["type", "conseq", "group", "sample"];

  for (var i = 0; i < filterby.length; i++) {
    var option_on = document.getElementById(filterby[i]).checked;
    var filterby_list = filterby[i] + "_list";

    if (option_on == true) {
      document.getElementById(filterby_list).style.display = "block";
    }
    else {
      document.getElementById(filterby_list).style.display = "none";
    }
  }
}

<input type="checkbox" name="filterby" id="type" value="type" onchange="showFilter();" />Type<br>
<input type="checkbox" name="filterby" id="conseq" value="conseq" onchange="showFilter();" />Consequence<br>
<input type="checkbox" name="filterby" id="group" value="group" onchange="showFilter();" />Group<br>
<input type="checkbox" name="filterby" id="sample" value="sample" onchange="showFilter();" />Sample<br>

<div id="type_list">type</div>
<div id="conseq_list">conseq</div>
<div id="group_list">group</div>
<div id="sample_list">sample</div>

【讨论】：