若元素不在页面上，为什么JavaScript会抛出错误？

我的场景是，我有一个JS文件，在两个HTML页面上使用。一个有一个带有

id=“a”

的

按钮，另一个没有。通过这样做，我在
id=“a”
上附加了一个事件

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

我的问题是，当我用
id=“a”
运行第二个没有
按钮的文件时，它会抛出错误

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

这会导致一些意想不到的行为！有没有办法只使用一个JS文件，或者我应该为每个html页面分离JS文件

我读了一个关于StackOverflow的问题，这个问题是关于如果选择器无效，为什么jQuery不会抛出错误。我需要与vanilla JavaScript相同或类似的功能。
简单的修复方法是添加一个检查：

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
            }
        }
    };
}

考虑测试存在性

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

或者在一个假动作的情况下后退

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

在第二种方法中，函数仍然会被设置，但是当对
{}
的引用在下一行消失时，函数将被快速GC化。
以上所有解决方案都是正确的。但是，您绝对应该远离编写
where.onclick=function
，因为这不再是编写代码的最佳方式。使用此方法，您只能获得一次单击事件。使用更现代的方法可以附加任意数量的事件

另外，您提到了jQuery，但在提供的代码中没有jQuery，只有JavaScript。您需要jQuery解决方案还是JavaScript

JavaScript
jQuery
应该是
getElementById（）
-您发现OP的资本化错误。在您的修复中，是否需要“！==null”部分？或者您可以这样做：if（document.getElementById（“a”）{document.getElementById（“a”）.onclick=function（）/*…*/}；}？jQuery会默默地忽略“element not found”条件，因为有时您需要这种行为，有时您不需要。就个人而言，如果我说“查找此元素”而“此元素”不存在，我想要一个错误。。。
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
    });
  }
});

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