JavaScript实现表单两数相加时点击计算按钮结果不更新问题求解

• 事件绑定逻辑错误：计算按钮的点击事件被写在了add()函数内部，而add()仅会在表单提交时触发，但你的「Add」按钮类型是button，点击不会触发表单提交，导致add()从未执行，计算逻辑也永远不会触发。就算触发也会出现重复绑定的问题，多次点击会重复执行计算逻辑。
• 数字合法性判断规则错误：num1 && num2 !== NaN的写法不符合JS语法规则，判断值是否为NaN必须使用isNaN()方法，且现有逻辑只能校验num2是否为NaN，无法覆盖num1的异常情况。
• 重置逻辑存在作用域隐患：num1、num2、result是add()函数内的局部变量，在重置按钮的回调中直接访问属于变量未定义，存在运行报错风险。

JavaScript 代码 #

const calcBtn = document.getElementById('calc');
const resetBtn = document.getElementById('btn');
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultInput = document.getElementById('result');

// 直接给计算按钮绑定点击事件
calcBtn.addEventListener('click', () => {
  const num1 = parseInt(num1Input.value);
  const num2 = parseInt(num2Input.value);

  // 校验两个输入值均为合法数字
  if (isNaN(num1) || isNaN(num2)) {
    alert("请输入有效数字");
    return;
  }

  resultInput.value = num1 + num2;
});

// 重置逻辑
resetBtn.addEventListener('click', () => {
  num1Input.value = "";
  num2Input.value = "";
  resultInput.value = "";
});

HTML 代码 #

<form id="adder">
  <input type="text" name="num1" id='num1' placeholder="输入数字">
  <input type="text" name="num2" id='num2' placeholder="输入数字">

  <button id="calc" type="button">相加</button>
  <input type="text" name="num3" id="result" readonly placeholder="计算结果">

  <button type="button" id="btn">清空</button>
</form>

• 移除了冗余的form onsubmit绑定，直接给计算按钮绑定点击事件，逻辑更直观
• 提前获取所有需要操作的DOM元素，避免重复查询DOM，性能更好
• 修正了数字校验逻辑，所有非法输入都会触发提示
• 修复了重置逻辑的变量作用域问题，避免运行报错

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