本文详解因 DOM 未加载完成导致 addEventListener 报错“Cannot read properties of null”的根本原因，并提供两种可靠解决方案，同时修正变量读取逻辑错误。
本文详解因 dom 未加载完成导致 `addeventlistener` 报错“cannot read properties of null”的根本原因，并提供两种可靠解决方案，同时修正变量读取逻辑错误。
在 JavaScript 初学者实现计算器功能时，常遇到类似 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 的报错。该错误本质并非语法问题，而是执行时机错误：脚本在浏览器尚未解析完 HTML、对应 DOM 元素（如 .add 按钮或 #num1 输入框）尚未生成时就尝试获取并绑定事件，导致 document.querySelector('.add') 返回 null，进而调用 null.addEventListener() 失败。
✅ 正确做法：确保 DOM 加载完成后再执行逻辑
方案一：将 <script> 移至 <body> 底部（推荐初学者）
修改 HTML，把 <script src="script.js"></script> 放在 </body> 之前，确保所有元素已渲染完毕：
<!-- 在 body 结束前插入 --> <script src="script.js"></script>
此时 script.js 可直接编写（无需包裹）：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
// script.js
const btnSoma = document.querySelector('.add');
// ⚠️ 注意：原代码中 const a/b 提前读取了 input 元素本身（而非其值），且未实时获取——这是另一个关键错误！
btnSoma.addEventListener('click', function() {
const a = Number(document.getElementById('num1').value) || 0; // .value 获取输入值，|| 0 防空值转 NaN
const b = Number(document.getElementById('num2').value) || 0;
const soma = a + b;
console.log('Result:', soma);
document.getElementById('result').textContent = `Resultado: ${soma}`;
});方案二：使用 DOMContentLoaded 事件（更健壮，推荐进阶使用）
即使脚本放在 <head> 中，也能安全执行：
// script.js
document.addEventListener('DOMContentLoaded', () => {
const btnSoma = document.querySelector('.add');
if (!btnSoma) {
console.error('Button with class ".add" not found. Check HTML class name.');
return;
}
btnSoma.addEventListener('click', () => {
const input1 = document.getElementById('num1');
const input2 = document.getElementById('num2');
// 安全读取：检查元素是否存在 + 使用 .value
const a = input1 ? Number(input1.value) || 0 : 0;
const b = input2 ? Number(input2.value) || 0 : 0;
const soma = a + b;
console.log(`Sum: ${soma}`);
document.getElementById('result').textContent = `Resultado: ${soma}`;
});
});? 关键修正点总结
- ❌ 错误写法：Number(document.getElementById('num1')) → 获取的是 <input> 元素对象，不是数值；
- ✅ 正确写法：Number(document.getElementById('num1').value) → 明确取 .value 属性；
- ?️ 增强容错：添加 || 0 避免空输入转为 NaN；
- ? 匹配 HTML：当前 HTML 中按钮无 class="add"，只有内联 onclick="add()" —— 请统一改为 <button class="add">+</button>，否则 querySelector('.add') 仍会返回 null；
- ? 最佳实践：始终在操作 DOM 前校验元素是否存在（如 if (!btnSoma) { ... }），提升代码鲁棒性。
通过以上调整，你的加法按钮即可稳定响应点击，为后续实现减法、乘法等运算打下坚实基础。
