JS计算器CE功能实现中如何正确修改Anum变量值

核心问题 #

• CE（Clear Entry）的标准逻辑是仅清除当前正在输入的第二操作数，保留已存储的第一操作数Anum和运算符kiho，但现有代码的CE逻辑只清空了输入框，没有重置输入状态标记，还调用了无实际作用的Cenumber()方法存空值，导致后续读取第二操作数Bnum时拿到脏数据。
• HTML中7、8、9三个数字按钮的onclick属性多了多余空格，写成了a dd(7)格式，点击后会直接报JS错误，无法正常输入数字。
• 全清按钮C对应的clean()方法没有重置全局计算变量，全清后仍会残留之前的运算符、操作数状态，导致后续计算异常。

具体修改方案 #

1. 重写ce()方法 #

不需要修改Anum的值，只需要清空输入框、重置输入标记，让用户可以重新输入第二操作数即可，删除无效的Cnum相关逻辑：

function ce() {
  document.getElementById("total").value = "";
  // 重置输入标记，下次按数字键会从空值开始拼接新的输入值
  flag = false;
}

2. 修复全清方法clean() #

全清需要把所有全局计算状态重置为初始值：

function clean() {
  flag = false;
  Anum = 0;
  Cnum = 0;
  kiho = undefined;
  document.getElementById("total").value = "0";
}

3. 修复HTML按钮拼写错误 #

把7、8、9三个按钮的onclick属性中多余的空格删除，修正为正确的函数调用：

<input type='button' style="width:45pt;height:45pt;font-size: 20px;font-weight:bold;" value=7 onclick="add(7)">
<input type='button' style="width:45pt;height:45pt;font-size: 20px;font-weight:bold;" value=8 onclick="add(8)">
<input type='button' style="width:45pt;height:45pt;font-size: 20px;font-weight:bold;" value=9 onclick="add(9)">

4. 给计算方法merge()加异常兜底 #

避免空输入、除0等场景出现NaN或报错：

function merge() {
  Cnum = Anum;
  var Bnum = document.getElementById("total").value;
  // 空输入兜底，未输入第二操作数时默认按0计算
  if(Bnum === "") Bnum = 0;
  var result;

  switch (kiho) {
    case '+':
      result = Number(Anum) + Number(Bnum);
      total.value = result;
      break;
    case '-':
      result = Number(Anum) - Number(Bnum);
      total.value = result;
      break;
    case '*':
      result = Number(Anum) * Number(Bnum);
      total.value = result;
      break;
    case '/':
      // 除0异常拦截
      if(Number(Bnum) === 0) {
        total.value = "错误";
        flag = false;
        return;
      }
      result = Number(Anum) / Number(Bnum);
      total.value = result;
      break;
  }
  // 计算完成后重置输入标记，方便后续输入新数字
  flag = false;
}

修改后验证 #

• 输入第一操作数、选运算符、输入第二操作数过程中按CE，会清空当前输入的第二操作数，保留之前的第一操作数和运算符，重新输入第二操作数后按等号可正常得到计算结果，不会出现Bnum值异常变动的问题
• 按C键会清空所有计算状态，回到初始0状态
• 所有数字按钮均可正常点击输入
• 空输入、除0等异常场景不会出现NaN或JS报错

内容的提问来源于stack exchange，提问作者강민영