计算器练习中click事件addEventListener报错问题求助

1. 核心报错原因：选择器匹配不到元素 #

你用document.querySelector('.add')查找加法按钮，但HTML里的加号按钮没有add这个类名，只有onclick="add()"属性，导致btnSoma返回null，无法调用addEventListener方法，这就是控制台报错的根源。

2. 修复方案及关键优化 #

方案一：给按钮添加对应类名（推荐） #

修改HTML中的加号按钮，补充class="add"：

<button onclick="add()" class="add">+</button>

方案二：不修改HTML，调整选择器 #

如果不想改动HTML结构，也可以用以下方式定位按钮：

// 通过onclick属性匹配
const btnSoma = document.querySelector('button[onclick="add()"]');
// 或通过按钮文本匹配
const btnSoma = Array.from(document.querySelectorAll('.buttons button')).find(btn => btn.textContent === '+');

3. 数值获取逻辑修正 #

你当前代码在页面加载时就获取输入框数值，此时用户还未输入内容，且后续输入框内容更新后，a和b的值不会同步变化。必须把数值读取操作放到点击事件内部，确保每次点击都获取输入框的最新值：

const btnSoma = document.querySelector('.add');

btnSoma.addEventListener('click', function() {
  // 每次点击时读取输入框当前值
  const a = Number(document.getElementById('num1').value);
  const b = Number(document.getElementById('num2').value);
  const soma = a + b;
  console.log(soma);
  // 可选：将结果显示到页面的result区域
  document.getElementById('result').textContent = `Resultado: ${soma}`;
});

4. 额外优化：处理无效输入 #

可以加入判断逻辑，避免用户输入非数字内容时出现NaN：

btnSoma.addEventListener('click', function() {
  const num1Input = document.getElementById('num1');
  const num2Input = document.getElementById('num2');
  const a = Number(num1Input.value);
  const b = Number(num2Input.value);
  
  if (isNaN(a) || isNaN(b)) {
    document.getElementById('result').textContent = 'Resultado: 请输入有效数字';
    return;
  }
  
  const soma = a + b;
  console.log(soma);
  document.getElementById('result').textContent = `Resultado: ${soma}`;
});

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