计算器出现Uncaught TypeError: 无法读取null的forEach属性问题求助

错误原因分析 #

1. 选择器使用错误：document.querySelector(".btn")仅会匹配页面中第一个带.btn类的元素，而非所有按钮。如果页面中无匹配元素，该方法会返回null，调用null.forEach()就会触发Uncaught TypeError。
2. 变量名拼写错误：循环内的button.addEventListener应为btn.addEventListener，变量名与循环参数不匹配。
3. DOM加载时机问题：若代码执行时DOM元素尚未加载完成，获取元素会返回null，进而引发后续错误。

修复后的代码 #

(function(){
    // 等待DOM完全加载后执行逻辑
    document.addEventListener('DOMContentLoaded', function() {
        let screen = document.querySelector(".screen");
        // 用querySelectorAll获取所有.btn元素（返回支持forEach的NodeList）
        let buttons = document.querySelectorAll(".btn");
        let clear = document.querySelector(".btn-clear");
        let green = document.querySelector(".btn-green");

        // 判断按钮集合存在后再遍历
        if(buttons.length > 0) {
            buttons.forEach(function(btn) {
                // 修正变量名，绑定点击事件
                btn.addEventListener('click', function(e){
                    let value = e.target.dataset.num;
                    // 确保屏幕元素存在再赋值
                    if(screen) {
                        screen.value += value;
                    }
                })
            });
        }
    });
})();

核心修复点 #

• 将document.querySelector(".btn")替换为document.querySelectorAll(".btn")，获取所有按钮元素。
• 修正循环内的变量名错误：button改为btn。
• 增加DOMContentLoaded事件监听，确保DOM加载完成后再执行元素获取和事件绑定逻辑。
• 增加元素存在性判断，避免因元素不存在引发的后续报错。

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