jQuery求和异常：文本框值拼接而非数值相加问题排查

我完全懂你遇到的这个坑——输入1和5得到16而不是15，本质原因是从输入框拿到的默认值是字符串类型，JavaScript里的+运算符碰到字符串就会触发拼接逻辑，而不是我们想要的数值相加。

给你几个针对性的解决步骤，轻松搞定这个问题：

• 先把输入值转成数值类型
  每次获取textbox的值时，用parseInt()（整数场景）或parseFloat()（需要小数的话）把字符串转成数字，示例代码：

  // 假设你的三个textbox分别对应class：box1、box2、resultBox
  const num1 = parseInt(document.querySelector('.box1').value, 10);
  const num2 = parseInt(document.querySelector('.box2').value, 10);
  const total = num1 + num2;
  document.querySelector('.resultBox').value = total;
  

  这里一定要加第二个参数10，强制用十进制解析，避免出现八进制的意外情况。

• 处理空值或非数字输入
  如果用户没输入内容或者输入了字母之类的非数字，parseInt()会返回NaN，这时候可以加个兜底，把空值默认当成0：

  const num1 = parseInt(document.querySelector('.box1').value, 10) || 0;
  const num2 = parseInt(document.querySelector('.box2').value, 10) || 0;
  const total = num1 + num2;
  document.querySelector('.resultBox').value = total;
  

• 针对多行结构优化代码
  因为你有4行重复结构，用循环处理每一行能避免重复写代码，更简洁：

  // 假设每行都有一个共同的class：calc-row
  const rows = document.querySelectorAll('.calc-row');
  rows.forEach(row => {
    // 在当前行内定位三个textbox
    const input1 = row.querySelector('.textbox1');
    const input2 = row.querySelector('.textbox2');
    const resultBox = row.querySelector('.row-result');
    
    // 给两个输入框绑定输入事件，实时计算
    [input1, input2].forEach(input => {
      input.addEventListener('input', () => {
        const val1 = parseInt(input1.value, 10) || 0;
        const val2 = parseInt(input2.value, 10) || 0;
        resultBox.value = val1 + val2;
      });
    });
  });
  

这样修改后，输入1和5就会正确算出15，再也不会出现字符串拼接的问题了。核心就是确保参与运算的是数值类型，而不是输入框返回的原始字符串。

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