如何在元素不存在时跳过对应JavaScript代码继续执行？

问题根源是document.querySelector找不到元素时会返回null，直接给null绑定onclick会抛出错误，导致后续代码完全停止执行。要实现“元素不存在就跳过，继续执行后续代码”，只需要给每个元素的绑定逻辑加个存在性判断即可。

方案一：逐个判断元素再绑定 #

直接修改原代码，先获取元素，确认存在后再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
    const mobileMenu = document.querySelector('#mobile-menu');
    if (mobileMenu) {
        mobileMenu.onclick = toggleMobileMenu;
    }

    const filterBtn = document.querySelector('#filterBtn');
    if (filterBtn) {
        filterBtn.onclick = toggleFiltersMenu;
    }

    const addTag = document.querySelector('#addTag');
    if (addTag) {
        addTag.onclick = createNewTagField;
    }
});

每个元素的绑定逻辑相互独立，就算某一页没有#filterBtn，也不会影响createNewTagField的绑定执行。

方案二：封装通用函数简化代码 #

如果需要绑定的事件很多，可以封装一个通用函数减少重复代码：

function bindEvent(selector, eventType, handler) {
    const element = document.querySelector(selector);
    if (element) {
        element[eventType] = handler;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    bindEvent('#mobile-menu', 'onclick', toggleMobileMenu);
    bindEvent('#filterBtn', 'onclick', toggleFiltersMenu);
    bindEvent('#addTag', 'onclick', createNewTagField);
});

这个函数会自动判断元素是否存在，后续新增事件绑定只需要调用bindEvent即可，代码更整洁。

内容的提问来源于stack exchange，提问作者Gina Costanzo