网页点击按钮切换背景色时出现TypeError: button is null，控制台运行正常求助

这个错误的核心原因其实很好理解——你的JavaScript代码在DOM还没完全加载好的时候就抢先执行了。浏览器加载页面是从上到下解析HTML的，如果你的JS代码写在按钮元素的前面，那代码执行时，按钮还没被浏览器创建出来，自然获取到的就是null；而你在控制台运行代码时，整个页面已经加载完成，所有DOM元素都存在了，所以就能正常工作。

下面给你几种实用的解决方案：

方案1：把JS代码放到HTML末尾（最简单直接） #

直接把你的JavaScript代码放在</body>标签的前面，这样当JS执行时，页面上的所有DOM元素都已经被解析完毕，自然能正确获取到按钮。

示例完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>切换背景色</title>
</head>
<body>
    <button id="colorBtn">点击切换背景色</button>

    <script>
        var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"]; 
        var flag = 0, blinkCount = 0; 
        var button = document.getElementById('colorBtn');
        let timerId; // 存定时器ID，方便后续清除

        function blink() { 
            if (blinkCount == 15) { 
                blinkCount = 0; 
            } else {
                document.body.style.backgroundColor = colors[blinkCount];
                blinkCount++;
                timerId = setTimeout(blink, 200);
            }
        }

        button.addEventListener('click', function() {
            if (flag == 0) {
                flag = 1;
                blink();
            } else {
                flag = 0;
                clearTimeout(timerId); // 停止闪烁
                document.body.style.backgroundColor = '#fff'; // 恢复默认背景色
            }
        });
    </script>
</body>
</html>

方案2：监听DOM加载完成事件（适合不想移动代码位置的情况） #

如果你不想调整JS代码的位置，可以使用DOMContentLoaded事件，它会在DOM完全加载完成后再触发你的代码逻辑：

document.addEventListener('DOMContentLoaded', function() {
    var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"]; 
    var flag = 0, blinkCount = 0; 
    var button = document.getElementById('colorBtn');
    let timerId;

    function blink() { 
        if (blinkCount == 15) { 
            blinkCount = 0; 
            blink();
        } else {
            document.body.style.backgroundColor = colors[blinkCount];
            blinkCount++;
            timerId = setTimeout(blink, 200);
        }
    }

    button.addEventListener('click', function() {
        if (flag === 0) {
            flag = 1;
            blink();
        } else {
            flag = 0;
            clearTimeout(timerId);
            document.body.style.backgroundColor = '#ffffff';
        }
    });
});

方案3：使用defer属性（针对外部JS文件） #

如果你的JS代码是放在单独的外部文件里的，可以在引入脚本的<script>标签上加上defer属性，浏览器会在DOM加载完成后再执行这个外部JS文件：

<script src="your-color-script.js" defer></script>

小提醒 #

• 尽量用addEventListener绑定点击事件，比直接写button.onclick更灵活，不会覆盖其他可能的事件监听
• 记得管理好定时器，比如停止闪烁时要清除定时器，避免不必要的内存消耗

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