实现HTML输入两数字、JS求和并HTML输出的功能遇阻求助

核心需求 #

在HTML页面收集用户输入的两个数字，调用JS函数完成两数相加，最终将结果渲染输出到HTML页面

现存代码的具体问题 #

• 表单传参逻辑无效：onsubmit='sum(a,b)' 写法里的a、b是未定义的全局标识，无法传递输入框的实际值到函数里
• 函数内部变量逻辑错误：声明的空变量c没有绑定任何DOM节点，直接给空变量赋值.value不会产生任何实际计算效果，非严格模式下会静默失败，严格模式下直接抛出报错
• 未阻止表单默认提交行为：表单触发submit事件后默认会刷新页面，导致刚渲染的计算结果会被页面刷新直接清空
• 标签关联错误：第二个输入框的<label>的for属性值还是写的a，和自身输入框id=b不匹配，会导致点击label无法聚焦对应输入框
• 输入值获取方式错误：没有通过DOM接口查询输入框元素的实际输入值，直接将不存在的参数传入parseInt会得到NaN结果

修复后可直接运行的代码 #

页面HTML代码 #

<html>
  <head>
    <meta charset="utf-8">
    <title> JavaScript | Basics</title>
    <script src="basics.js" charset="utf-8"></script>
  </head>
  <body>
    <form id="sumForm">
      <label for="a">Input number a</label>
      <input type="number" name="a" value="0" id="a">
      <br>
      <label for="b">Input number b</label>
      <input type="number" name="b" value="0" id="b">
      <button type="submit" name="submit">Submit</button>
      <output id="total"></output>
    </form>
  </body>
</html>

对应JS文件（basics.js）代码 #

// 给表单绑定提交监听事件
document.getElementById('sumForm').addEventListener('submit', (event) => {
  // 阻止表单默认的页面刷新行为
  event.preventDefault();
  calculateSum();
});

function calculateSum() {
  // 通过DOM获取两个输入框的输入值，转为整数类型
  const inputA = parseInt(document.getElementById('a').value);
  const inputB = parseInt(document.getElementById('b').value);
  const sumResult = inputA + inputB;

  console.log('计算完成，结果为：', sumResult);
  window.alert(sumResult);
  // 将结果输出到页面的output区域
  document.getElementById('total').innerHTML = `两数相加结果为：${sumResult}`;
}

注意：原代码里被注释的旧测试逻辑如果不需要可以直接删除，避免代码冗余。

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