Question

我的方案是我有一个JS文件正在两个HTML页面上使用。其中一个button id="a"，另一个没有id="a"。我通过这样做在document.getElementbyId("a").onclick = function () { .. }附加了一个事件。

button

我的问题是当我运行第二个文件时，id="a"没有TypeError: document.getElementbyId(...) is null并且它会抛出错误

{{1}}

导致一些意想不到的行为！有没有办法继续只使用一个JS文件，还是应该为每个html页面分隔JS文件？

我在StackOverflow here上读到了一个问题，这就是为什么如果选择器无效，jQuery不会抛出错误。我需要与vanilla 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

考虑测试存在

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

或者在虚假的情况下退缩

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

在第二种方法中，函数仍然会被设置，但会快速GC，因为{}的引用在下一行死亡。

Answer 3

以上所有解决方案都是正确的。但是，您绝对不应该编写whatever.onclick = function，因为这不再是编写代码的最佳方式。使用此方法，您只能获得一次单击事件。使用更现代的方法，您可以根据需要附加任意数量的事件。

另外，你提到jQuery但是在提供的代码中没有jQuery只有vanilla JavaScript。你需要一个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
  });
});

如果页面上没有元素，为什么JavaScript会抛出错误？

3 个答案:

的JavaScript

的jQuery