Question

我想在我的php页面上有一个按钮来隐藏和取消隐藏我页面上的某个部分。我有这个javascript函数：

      function toggle_filters(){
    var x = document.getElementById("filters");
    var displayState = x.style.display;
    if(displayState == "none")
    {
        displayState = "block";
    }
    else {
        displayState = "none";
    }
}

我有这个HTML代码：

<section id="buttons">
    <button id="filter_button">Filters</button>
</section>
<section id="filters">
    <form>
        <select>
            <option>1st option</option>
            <option>2nd option</option>
        </select>
    </form>
</section>

（这是一个简化版）

问题是我的浏览器给了我这个错误：

未捕获的TypeError：无法读取null的属性'style'

这是我的代码的jsfiddle： https://jsfiddle.net/90wkwn65/2/

我搜索了互联网，但我找不到答案。任何帮助将不胜感激！

Answer 1

执行此操作时：

var displayState = x.style.display;

displayState只是一个包含字符串的变量。它与x.style之间没有任何连接。

所以，当你这样做时：

displayState = "block";

您所做的只是更改displayState变量的值 - 根本没有与style x对象的连接。因此，您需要为实际样式对象分配属性，以便实际更改样式。

同样来自jsFiddle中的代码，您需要更改此内容：

document.getElementById("filter_button").onclick = toggle_filters();

到此：

document.getElementById("filter_button").onclick = toggle_filters;

当你将()放在函数名之后立即执行函数时，返回结果将作为onclick处理程序应用。在这种特殊情况下，您只需要将一个函数引用指定为onclick处理程序，这样就可以在它之后只传递没有parens的函数名。

应用这两项更改，此代码适用于jsFiddle：

function toggle_filters(){
    var x = document.getElementById("filters");
    if(x.style.display == "none")
    {
        x.style.display = "block";
    }
    else {
        x.style.display = "none";
    }
}
document.getElementById("filter_button").onclick = toggle_filters;

上面的代码在jsFiddle中有效，但如果您的真实代码仍然出现错误：

Uncaught TypeError: Cannot read property 'style' of null

然后，这是因为您过早地运行document.getElementById("filter_button")代码行（可能在<head>部分）。相反，您必须仅在加载DOM之后运行该行代码。最简单的方法是将<script>标记移到</body>标记之前。有关此问题的详细信息，请参阅此答案（pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it）。

Answer 2

您可以将element.style存储为引用以更改css属性，但不能以相同的方式将element.style.display存储为引用。

同样在分配onclick功能时，不要使用括号，否则该函数将执行而不是分配给click事件。

（Demo）

  function toggle_filters() {
      var x = document.getElementById("filters");
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
  document.getElementById("filter_button").onclick = toggle_filters;

javascript无法识别ID

2 个答案: