JavaScript计算器项目出现Uncaught TypeError错误，寻求技术协助

错误原因 #

这个报错的核心是document.querySelector(".btn-equal")没有找到匹配的DOM元素，返回了null，你直接调用null.addEventListener自然会触发类型错误。常见诱因有两个：要么HTML里不存在类名为btn-equal的元素，要么JS代码在DOM元素加载完成前就执行了。

解决方案 #

1. 检查HTML元素的正确性
   确认你的HTML文件里存在带有btn-equal类的元素，比如：

<button class="btn-equal">=</button>

注意类名拼写必须完全一致，大小写、多余空格都会导致匹配失败。

2. 确保JS代码在DOM加载完成后执行
   JS只能获取已经加载到页面中的DOM元素，以下三种方式可以实现：

   • 将JS脚本放在<body>标签的末尾：

     <body>
       <!-- 所有HTML内容 -->
       <script>
         // 你的计算器代码
       </script>
     </body>
     

   • 用DOMContentLoaded事件包裹代码：

     document.addEventListener('DOMContentLoaded', function() {
       let equal = document.querySelector(".btn-equal");
       // 先判断元素是否存在，避免重复报错
       if (equal) {
         equal.addEventListener("click", function (e) {
           // 先获取屏幕元素，避免screen未定义报错
           let screen = document.querySelector(".screen");
           if (!screen) return;
           
           if (screen.value === "") {
             screen.value = "";
           } else {
             // 用try-catch处理eval可能的非法表达式错误
             try {
               let answer = eval(screen.value);
               screen.value = answer;
             } catch (err) {
               screen.value = "Error";
             }
           }
         });
       }
     });
     

   • 给外部脚本标签添加defer属性（如果JS是外部文件）：

     <script src="calculator.js" defer></script>
     

3. 额外优化建议

   • 每次获取DOM元素后都做存在性判断，从根源避免null相关报错
   • 新手项目用eval暂时没问题，但要记得加try-catch捕获非法表达式（比如1++2），防止计算器直接崩溃

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