JavaScript计算器数值计算异常：减法后出现字符串拼接问题求助

嘿，我一下子就get到你的问题啦！这典型是字符串和数字类型搞混导致的，咱们一步步来捋清楚：

问题根源 #

从DOM输入框（比如#salary）获取的value默认是字符串类型。第一次运算9000-100正常，是因为JavaScript的-运算符会自动把两边的字符串隐式转换成数字计算。但当你把结果（比如8900）赋值回输入框后，输入框的value又会把它转成字符串"8900"。

如果第二次运算时，你没把这个字符串转成数字就直接操作——比如不小心用了+运算符（或者代码里逻辑错误导致拼接），就会变成字符串拼接，也就是"8900" + "100"，结果自然就是8900100了。

修复方案 #

核心就是每次获取输入值时，显式转换成数字类型，避免隐式转换带来的意外。修改你的calculateTaxes函数就行：

function calculateTaxes(e){
  // 获取输入元素
  const salInput = document.querySelector('#salary');
  const rentInput = document.querySelector('#rent'); // 假设房租对应这个输入框
  
  // 显式把字符串转成数字！这是关键
  let salary = Number(salInput.value);
  const rent = Number(rentInput.value);

  // 执行减法运算（确保用的是减号`-`，别写成加号`+`）
  const result = salary - rent;

  // 把结果赋值回输入框
  salInput.value = result;

  e.preventDefault(); // 如果按钮在表单里，阻止默认提交行为
}

额外建议 #

• 可以给Number()加个兜底，比如Number(salInput.value) || 0，避免输入空值时得到NaN。
• 如果你的计算器支持多步运算，记得把每次的结果都以数字类型存储，别依赖输入框的字符串值来计算。

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