javascript没有'；我认不出身份证

我希望在我的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”

下面是一个包含我的代码的JSFIDLE：

我在网上搜索了一下，但找不到答案。

---

任何帮助都将不胜感激

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

另外，在分配onclick函数时，不要使用括号，否则函数将执行，而不是分配给click事件

（）

---

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

另外，在分配onclick函数时，不要使用括号，否则函数将执行，而不是分配给click事件

（）

执行此操作时：

var displayState = x.style.display;

displayState

只是一个包含字符串的变量。它与

x.style

的连接不再为零

因此，当您执行此操作时：

displayState = "block";

您所做的只是更改

displayState

变量的值-与

x

的

style

对象没有任何连接。因此，您需要指定给实际样式对象上的属性，以便实际更改样式

---

同样从JSFIDLE中的代码中，您需要更改以下内容：

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

为此：

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

当您将

（）

放在函数名之后时，该函数将立即执行，返回结果将作为onclick处理程序应用。在这种特殊情况下，您只需要将函数引用指定为onclick处理程序，以便只传递函数名，后面不带paren

---

应用这两个更改，此代码在以下情况下工作：

---

上面的代码在JSFIDLE中工作，但是如果您的实际代码仍然出现错误：

Uncaught TypeError: Cannot read property 'style' of null

然后，这是因为您运行

document.getElementById（“filter_button”）

行代码太快了（可能在

部分）。相反，只有在加载DOM后才能运行该行代码。最简单的方法是将

标记移到

标记之前的右侧。有关此问题的更多详细信息，请参阅此答案（）

var displayState = x.style.display;

displayState

只是一个包含字符串的变量。它与

x.style

的连接不再为零

因此，当您执行此操作时：

displayState = "block";

您所做的只是更改

displayState

变量的值-与

x

的

style

对象没有任何连接。因此，您需要指定给实际样式对象上的属性，以便实际更改样式

---

同样从JSFIDLE中的代码中，您需要更改以下内容：

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

为此：

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

当您将

（）

放在函数名之后时，该函数将立即执行，返回结果将作为onclick处理程序应用。在这种特殊情况下，您只需要将函数引用指定为onclick处理程序，以便只传递函数名，后面不带paren

---

应用这两个更改，此代码在以下情况下工作：

---

上面的代码在JSFIDLE中工作，但是如果您的实际代码仍然出现错误：

Uncaught TypeError: Cannot read property 'style' of null

---

然后，这是因为您运行

document.getElementById（“filter_button”）

行代码太快了（可能在

部分）。相反，只有在加载DOM后才能运行该行代码。最简单的方法是将

标记移到

标记之前的右侧。有关此问题的更多详细信息，请参阅此答案（）。

使用此代码，我会遇到另一个错误：未捕获类型错误：无法设置Null的属性“onclick”。使用此代码，我会遇到另一个错误：未捕获类型错误：无法将Null的属性“onclick”设置为与其他答案相同，通过这段代码，我得到了以下错误：uncaughttypeerror:无法设置的属性'onclick'null@LorenzoDeBie-请阅读我答案的最后一部分。您的实际代码与JSFIDLE的工作方式不同，因此您需要对

标记的位置进行更正。这就完成了工作！谢谢注意力跨度短…与其他答案相同，使用此代码我得到以下错误：UncaughtTypeError:无法设置的属性'onclick'null@LorenzoDeBie-请阅读我答案的最后一部分。您的实际代码与JSFIDLE的工作方式不同，因此您需要对

标记的位置进行更正。这就完成了工作！谢谢注意力跨度短…最好在“无”和“”（空字符串）之间切换显示属性，以便在可见时，元素采用其默认或继承的样式。它比设置为“block”更通用，后者不适合许多元素。哦，错误可能是因为函数在页面中存在元素之前运行。这是一个输入错误，我将对其进行编辑。最好在“无”和“”（空字符串）之间切换显示属性，以便在可见时，元素采用其默认或继承的样式。它比设置为“block”更通用，后者不适合许多元素。哦，这个错误可能是因为函数在元素出现在页面中之前就已经运行了。这是一个输入错误，我会编辑它。