JavaScript数值相加异常与提交结果闪失问题求助

别担心，新手遇到这些问题太正常啦！我帮你一步步拆解解决：

问题1：输入框值相加变成字符串拼接 #

HTML输入框获取到的value默认是字符串类型，直接用+运算符的话，会触发字符串拼接行为，而不是数学加法——这就是为什么你看到的是两个值连在一起，而不是相加结果。

解决方法：把输入值转为数字类型 #

你可以用这几种简单方式把字符串转成数字：

• Number()：通用转换，支持整数和小数
• parseInt()：转成整数，记得加第二个参数10表示十进制（避免进制解析错误）
• parseFloat()：专门转成浮点数

举个修正后的代码例子，假设你的输入框id是num1和num2，结果显示元素id是result：

function calculateSum() {
  // 先获取输入值并转为数字
  let num1 = Number(document.getElementById('num1').value);
  let num2 = Number(document.getElementById('num2').value);
  // 现在是真正的数学加法
  let sum = num1 + num2;
  // 把结果显示出来
  document.getElementById('result').textContent = `相加结果：${sum}`;
}

问题2：提交后结果短暂显示就消失 #

这是因为你大概率用了表单的submit按钮，点击后浏览器会默认执行表单提交操作——也就是刷新页面，刚显示的结果自然就被刷没了。

解决方法：阻止表单默认提交行为 #

有两种常用的解决方式：

1. 把按钮类型改成button：如果你的按钮是<input type="submit">，改成<input type="button">，这样点击就不会触发表单提交逻辑
2. 在事件处理函数中阻止默认行为：如果必须用submit按钮，就在函数里添加event.preventDefault()来取消浏览器的默认刷新

方式1示例（改按钮类型）：

<input type="number" id="num1">
<input type="number" id="num2">
<!-- 把submit改成button -->
<button type="button" onclick="calculateSum()">计算</button>
<div id="result"></div>

<script>
function calculateSum() {
  let num1 = Number(document.getElementById('num1').value);
  let num2 = Number(document.getElementById('num2').value);
  let sum = num1 + num2;
  document.getElementById('result').textContent = `相加结果：${sum}`;
}
</script>

方式2示例（阻止默认行为）：

<!-- 给form绑定submit事件，并传递event参数 -->
<form onsubmit="calculateSum(event)">
  <input type="number" id="num1">
  <input type="number" id="num2">
  <button type="submit">计算</button>
</form>
<div id="result"></div>

<script>
function calculateSum(event) {
  // 关键：阻止表单默认的提交刷新行为
  event.preventDefault();
  
  let num1 = Number(document.getElementById('num1').value);
  let num2 = Number(document.getElementById('num2').value);
  let sum = num1 + num2;
  document.getElementById('result').textContent = `相加结果：${sum}`;
}
</script>

这样两个问题就都解决啦，试试上面的代码，有疑问随时问！

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