点击“+”后如何将值存入不同变量？附相关代码片段

嘿，我看你正在做简易计算器的逻辑，点击加号后需要把之前输入的数值存到单独变量里对吧？咱们可以通过在外层作用域定义专门的状态变量来区分不同操作数，下面是具体的修改方案：

核心思路 #

我们需要三个关键变量来管理计算器的状态：

• firstOperand：存储加号前输入的第一个数值
• operator：记录当前选中的运算符（比如这里的"+"）
• shouldResetDisplay：标记是否需要清空显示屏，方便输入第二个操作数

修改后的完整代码 #

// 在外层定义变量，保存计算器的全局状态
let firstOperand = null;
let operator = null;
let shouldResetDisplay = false;

document.querySelector('.buttons').addEventListener('click', function(e) {
  const targetElement = e.target || e.srcElement;
  const selectedNumber = targetElement.dataset.number;
  const displayElement = document.getElementById('display');

  // 处理数字点击逻辑
  if (!isNaN(selectedNumber)) {
    // 如果刚选完运算符，先清空显示屏，准备输入第二个数
    if (shouldResetDisplay) {
      displayElement.value = '';
      shouldResetDisplay = false;
    }
    displayElement.value += selectedNumber;
    console.log("当前输入值: " + displayElement.value);
  }

  // 处理加号点击逻辑
  if (selectedNumber === '+') {
    // 将当前显示屏的字符串转成数字，存入第一个操作数变量
    firstOperand = parseFloat(displayElement.value);
    // 记录当前选中的运算符
    operator = '+';
    // 标记下一次输入前要清空显示屏
    shouldResetDisplay = true;
    
    console.log("第一个操作数已存入: " + firstOperand);
    console.log("当前运算符: " + operator);
  }

  // （可选）后续可添加等于号逻辑：点击"="时，把当前显示屏值作为第二个操作数，结合运算符计算结果
});

关键逻辑说明 #

1. 外层变量作用域：把firstOperand等变量放在事件监听函数外面，这样每次点击事件都能访问和更新这些状态，不会因为函数执行结束而丢失数据。
2. 数字输入优化：新增shouldResetDisplay判断，确保点击加号后再输入数字时，显示屏会自动清空，避免两个操作数连在一起。
3. 加号分支处理：
   • 用parseFloat把显示屏的字符串转成数字（如果需要整数可以用parseInt），存入专门的firstOperand变量
   • 记录当前运算符为"+"，方便后续计算时调用
   • 标记需要重置显示屏，为输入第二个操作数做准备

这样你就成功把加号前的数值存入了独立变量，后续输入的第二个数值也可以用同样的思路存入新变量（比如secondOperand），最后结合运算符就能完成计算啦～

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