javascript無法識別ID

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的屬性“樣式”

這是帶有我的代碼的jsfiddle： https ://jsfiddle.net/90wkwn65/2/

我搜索了互聯網，但找不到答案。 任何幫助，將不勝感激！

Answer 1

執行此操作時：

var displayState = x.style.display;

displayState只是一個包含字符串的變量。 它與x.style連接x.style為零。

因此，當您執行此操作時：

displayState = "block";

您要做的就是更改displayState變量的值-完全沒有連接到x的style對象。 因此，您需要在實際的樣式對象上分配一個屬性，以便實際更改樣式。

同樣從jsFiddle中的代碼中，您需要更改此代碼：

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

對此：

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

當在函數名稱后加上() ，該函數將立即執行，並且返回結果將用作onclick處理程序。 在這種特殊情況下，您只想將一個函數引用分配為onclick處理程序，以便僅傳遞函數名稱，而后不帶括號。

應用這兩個更改，此代碼可在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")運行了document.getElementById("filter_button")代碼行（可能在<head>部分中）。 而是必須在加載DOM之后僅運行該行代碼。 最簡單的方法是將<script>標記移到</body>標記之前。 有關此問題的更多詳細信息，請參見此答案（純JavaScript等效於jQuery的$ .ready（）如何在頁面/ dom准備就緒時調用函數）。

Answer 2

您可以將element.style.display存儲為參考，以更改css屬性，但不能以相同方式將element.style.display存儲為參考。

同樣，在分配onclick函數時，請勿使用括號，否則函數將執行，而不是分配給click事件。

（演示）

  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 個解決方案

解決方案1
3 已采納 2015-05-15 23:30:42

解決方案2
1

javascript無法識別ID

問題描述

2 個解決方案

解決方案1 3 已采納 2015-05-15 23:30:42

解決方案2 1

解決方案1
3 已采納 2015-05-15 23:30:42

解決方案2
1