如何用JavaScript在单个表单中实现两个输入值求和？

完全可以用JavaScript实现单个表单内两个输入值的求和功能，下面是一个简单的实现示例：

完整代码 #

<form id="sumForm">
  <label>第一个数值：<input type="number" id="num1" value="150"></label>
  <label>第二个数值：<input type="number" id="num2" value="200"></label>
  <button type="button" onclick="calculateSum()">计算求和</button>
  <p>求和结果：<span id="result"></span></p>
</form>

<script>
function calculateSum() {
  // 获取两个输入框的值并转换为数字
  const num1 = parseFloat(document.getElementById('num1').value) || 0;
  const num2 = parseFloat(document.getElementById('num2').value) || 0;
  
  // 计算求和
  const sum = num1 + num2;
  
  // 更新结果显示
  document.getElementById('result').textContent = sum;
}

// 页面加载完成后默认计算一次，显示初始结果
window.onload = calculateSum;
</script>

代码说明 #

• 使用type="number"的输入框确保用户只能输入数字，避免非数值干扰
• parseFloat()用于把输入的字符串值转换为数字，加上|| 0处理空输入的情况
• 点击按钮触发求和计算，同时页面加载时自动执行一次，显示初始的350结果
• 如果需要实时求和（输入时自动更新结果），可以把计算逻辑绑定到输入框的input事件：

// 替换按钮点击事件，改为实时监听输入
document.getElementById('num1').addEventListener('input', calculateSum);
document.getElementById('num2').addEventListener('input', calculateSum);

这样就能实现你需要的表单内两数求和功能，最终输出350的效果完全没问题。

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