如果頁面上沒有元素，為什么JavaScript會引發錯誤？

Question

我的情況是我有一個JS文件，該文件正在兩個HTML頁面上使用。 一個button帶有id="a"的button ，另一個button則沒有。 通過執行此操作，我在id="a"上附加了一個事件。

document.getElementbyId("a").onclick = function () { .. }

我的問題是，當我運行第二個沒有id="a" button文件時，它將引發錯誤

TypeError: document.getElementbyId(...) is null

這會導致一些意外行為！ 有什么辦法可以只使用一個JS文件，還是應該為每個html頁面分離JS文件？

我在這里閱讀有關StackOverflow的問題，這是關於為什么選擇器無效時jQuery不會引發錯誤的問題。 我需要香草JavaScript具有相同或相似的功能。

Answer 1

簡單的解決方法是添加檢查：

if (document.getElementById("a") !== null) {
    document.getElementById("a").onclick = function () /* .. */ };
}

jQuery永遠不會因缺少元素而中斷，只是默默地失敗。 您可以爭論這是否好。

jQuery使用的技巧是它將始終返回某些內容。 $("#id")將返回一個jQuery包裝器。 這種包裝具有類似的功能.on和.load和.html 。 選擇器可以匹配一個，多個或沒有任何元素。 對於包裝器，匹配多少個元素無關緊要。

它是這樣的：

var elem = get_element("a");
elem.onclick(callback);

function get_element(id) {
    var elem = document.getElementById(id);
    return { // return a wrapper
        onclick: function (callback) {
            if (elem !== null) {
                elem.onclick = callback;
            } else {
                // silently fail
            }
        }
    };
}

Answer 2

以上所有解決方案都是正確的。 但是，您絕對應該遠離編寫whatever.onclick = function因為它不再是編寫代碼的最佳方法。 使用此方法，您只會獲得一個單擊事件。 使用更現代的方法可使您附加所需的事件。

另外，您提到了jQuery，但是提供的代碼中只有普通JavaScript沒有jQuery。 您需要jQuery解決方案還是JavaScript？

的JavaScript

document.addEventListener('DOMContentLoaded', function(){
  var elm = document.getElementById('a');
  if ( elm ) { //if the element exists add the click event
    elm.addEventListener('click', function(){
      //Your "onclick" code here
    });
  }
});

jQuery的

$(function(){
  $('#a').on('click', function(){
    //Your "onclick" code here
  });
});

Answer 3

考慮測試存在

var elm = document.getElementById("a");
if (elm) elm.onclick = function () { .. };

或者在虛假的情況下退縮

(document.getElementById("a") || {}).onclick = function () { .. };

在第二種方法中，該函數仍然被設置，但是將在下一行快速引用GC作為對{}的引用。