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

Question

我的情况是我有一个JS文件正在两个HTML页面上使用.一个人有一个button,id="a"另一个没有.我id="a"通过这样做附上了一个事件.

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

我的问题是当我运行没有buttonwith的第二个文件时id="a"它会抛出错误

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

这会导致一些意外的行为!有没有办法继续使用一个JS文件,还是应该为每个html页面分隔JS文件？

我在这里读了一个关于StackOverflow的问题,这就是为什么如果选择器无效,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
            }
        }
    };
}