外部文件脚本可正常运行，内嵌HTML脚本失效问题求助

问题还原 #

将脚本通过外部引入方式放在<head>标签中时可正常运行：

<script src="/assets/js/timer.js" defer></script>

但直接内嵌到HTML中时无法正常运行，即便将PHP输出的链接替换为固定链接，问题仍存在，内嵌代码如下：

<script>
    const downloadBtn = document.querySelector(".download-btn");
    
    const fileLink = "你的固定下载链接";

    const initTimer = () => {
        if(downloadBtn.classList.contains("disableTimer")) {
            return location.href = fileLink;
        }
        let timer = downloadBtn.dataset.timer;
        downloadBtn.classList.add("timer");
        downloadBtn.innerHTML = `Your files will download in <b>${timer}</b> seconds`;
        const initCounter = setInterval(() => {
            if(timer > 0) {
                timer--;
                return downloadBtn.innerHTML = `Your files will download in <b>${timer}</b> seconds`;
            }
            clearInterval(initCounter);
            location.href = fileLink;
            downloadBtn.innerText = "Se están descargando los archivos";
            setTimeout(() => {
                downloadBtn.classList.replace("timer", "disableTimer");
                downloadBtn.innerHTML = `<span class="icon material-symbols-rounded">vertical_align_bottom</span>
                                        <span class="text">Download again</span>`;
            }, 3000);
        }, 1000);
    }
        
    downloadBtn.addEventListener("click", initTimer);
</script>

核心原因 #

外部引入的脚本加了defer属性，该属性会让脚本等待DOM完全加载完成后再执行，此时.download-btn元素已存在，能被正常获取。而直接内嵌的脚本若放在<head>中，会在DOM还未加载到.download-btn元素时就执行，导致document.querySelector(".download-btn")返回null，后续事件绑定等操作自然失效。

修复方案 #

方案1：将内嵌脚本移到<body>末尾 #

把脚本放在</body>标签上方，确保DOM所有元素加载完成后再执行脚本：

<body>
    <!-- 页面所有内容 -->
    <script>
        // 你的内嵌脚本代码
    </script>
</body>

方案2：给内嵌脚本添加defer属性 #

现代浏览器支持给内嵌脚本添加defer属性，效果与外部脚本的defer一致，等待DOM加载完成后执行：

<script defer>
    // 你的内嵌脚本代码
</script>

方案3：用DOMContentLoaded事件包裹代码 #

通过监听DOMContentLoaded事件，确保DOM加载完成后再执行脚本逻辑：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const downloadBtn = document.querySelector(".download-btn");
        
        const fileLink = "你的固定下载链接";

        const initTimer = () => {
            // 原initTimer函数代码
        }
            
        downloadBtn.addEventListener("click", initTimer);
    });
</script>

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