前端计算器减法功能异常：输入数值相减返回NaN求助

嘿，我一眼就瞅出问题所在啦！你遇到的“Not a Number”弹窗，本质是代码里变量存错东西了，不是数字而是jQuery对象，自然没法做减法运算。

问题根源 #

你看这段赋值代码：

firstNumber = $('.res').val(Number(($('.res').val()) + $(this).val()));

$('.res').val(...)这个方法返回的是jQuery对象本身，不是设置后的输入框数值。所以firstNumber和secondNumber存的都是对象，对象减对象可不就得到NaN嘛！

另外还有个小坑：输入框初始值是空格（value=" "），第一次点击数字时会拼成" 5"这种带空格的字符串，转成Number直接就是NaN，也会搞砸后续计算。

修正后的代码 #

我帮你把两处关键问题都改掉了，还加了些更稳妥的处理：

<div class="wind"> 
  <input class="res" value="" maxlength="24"> <!-- 去掉初始空格，避免转数字出错 -->
  <input class="res2" value="" maxlength="24">
  <button class="equal">=</button> 
</div>
<div class="numbers">
  <!-- 这里是你的数字按钮，比如<button class="one">1</button>之类的 -->
</div>

<script>
// 先初始化数值变量
let firstNumber = 0;
let secondNumber = 0;

$(".one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.dot").on('mousedown',function(event){
  event.preventDefault();
  if($('.res').is(":focus")){
    // 先去掉当前值的空格，拼接新数字后转成数值
    const currentVal = $('.res').val().trim();
    const newVal = Number(currentVal + $(this).val());
    $('.res').val(newVal);
    firstNumber = newVal; // 存实际数值，不是jQuery对象
  } else {
    const currentVal = $('.res2').val().trim();
    const newVal = Number(currentVal + $(this).val());
    $('.res2').val(newVal);
    secondNumber = newVal;
  }
})

$('.equal').click(function(){
  // 保险起见，直接从输入框取最新值计算，避免变量同步问题
  const num1 = Number($('.res').val().trim());
  const num2 = Number($('.res2').val().trim());
  alert(num1 - num2);
})
</script>

额外小提示 #

• 输入框初始值改成空字符串，避免空格干扰数值转换；
• 用.trim()去掉输入值的前后空格，防止用户意外输入空格；
• 点击等于时直接从输入框取最新值，就算中间变量没同步也能拿到正确结果，更稳妥。

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