JS脚本全局加载引发控制台错误，求适配特定模板的解决方法

问题背景 #

触发控制台错误：

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

涉事代码：

var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');

window.addEventListener('DOMContentLoaded', () => { 
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

问题原因：脚本统一放在单个JS文件中，部分页面无需这段代码，导致找不到#hello元素，trigger变量为null，后续绑定事件时触发报错。尝试用模板类判断包裹代码时，因语法错误出现新问题。

解决办法 #

1. 修正模板类判断的语法错误 #

你之前的判断代码少了闭合括号，正确写法：

if (document.querySelector('.template-name')) {
    // 原有代码逻辑
}

2. 稳妥的元素存在性判断方案 #

将元素获取逻辑放到DOMContentLoaded回调内，同时增加元素存在性校验，避免null报错：

window.addEventListener('DOMContentLoaded', () => { 
    // 先获取元素，再判断是否存在
    const trigger = document.getElementById("hello");
    if (!trigger) return; // 元素不存在则直接退出
    
    const audio = new Audio('audio/hello.mp3');
    
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

3. 结合模板类的完整控制方案 #

如果需要仅在特定模板页面执行这段代码，先判断模板标识类是否存在，再执行后续逻辑：

window.addEventListener('DOMContentLoaded', () => { 
    // 先校验是否为目标模板页面
    if (!document.querySelector('.template-name')) return;
    
    const trigger = document.getElementById("hello");
    if (!trigger) return;
    
    const audio = new Audio('audio/hello.mp3');
    
    trigger.addEventListener("click", function(event) {
        event.preventDefault();
        audio.play();
    }, false);
});

4. 可选链简化判断（ES2020+支持） #

如果项目环境支持ES2020及以上，可以用可选链操作符简化null校验：

window.addEventListener('DOMContentLoaded', () => { 
    const trigger = document.getElementById("hello");
    // 可选链会自动跳过null/undefined的属性访问
    trigger?.addEventListener("click", function(event) {
        event.preventDefault();
        new Audio('audio/hello.mp3').play();
    }, false);
});

关键说明 #

原代码报错的核心原因：var trigger = document.getElementById("hello");在DOM加载完成前就执行了，且未做存在性判断。当页面无#hello元素时，trigger为null，后续回调中调用addEventListener就会触发类型错误。

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