JavaScript中变量整数相加却输出字符串问题

嘿，我一眼就看出问题出在哪啦——你在计算的时候不小心混用了数字类型和字符串类型，导致JavaScript触发了字符串拼接而不是数字加法。咱们一步步拆解并修复：

问题根源 #

• 哪怕是type="number"的输入框，document.getElementById("input").value获取到的内容始终是字符串，这是HTML输入元素的特性。
• 你虽然把输入值转成了整数存在p1里，但计算p2时用的是parseInt(p1) + input，这里的input还是原始的字符串！数字加字符串会被JS自动转换成字符串拼接（比如输入5的话，结果就是"5"+"5"="55"），p3同理，因为p2已经是字符串了，再加字符串自然还是拼接结果。

修复后的代码 #

JavaScript部分 #

function submit() {
  // 先拿到输入的字符串，再转成整数（记得加基数10，避免八进制解析的坑）
  const inputStr = document.getElementById("input").value;
  const numInput = parseInt(inputStr, 10);
  
  // 额外加个校验，防止输入无效内容导致NaN
  if (isNaN(numInput)) {
    alert("请输入有效的整数哦");
    return;
  }
  
  // 所有计算都用转好的数字变量，避免类型混用
  const p1 = numInput;
  const p2 = numInput + p1;
  const p3 = numInput + p2;
  
  document.getElementById("p1").innerHTML = p1;
  document.getElementById("p2").innerHTML = p2;
  document.getElementById("p3").innerHTML = p3;
}

HTML部分（可保留原代码） #

<label for="input">Value</label><br>
<input type="number" id="input"><br>
<button id="btnSubmit" onclick="submit()">Submit</button>
<p id="p1">0</p>
<p id="p2">0</p>
<p id="p3">0</p>

额外小提示 #

• 如果你需要支持小数输入，可以用parseFloat(inputStr)或者Number(inputStr)代替parseInt，后者会保留输入的小数部分。
• 给parseInt加第二个参数10非常重要！不然如果输入的是010这类开头的数字，旧版JS会把它当成八进制解析，返回8而不是10。
• 加入isNaN校验可以避免用户输入非数字内容时，页面输出NaN的尴尬情况。

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