如何将按钮点击获取的值存入变量以实现计算器加减乘除运算

一、先修复现有代码的基础问题 #

• 你当前使用input的placeholder属性存储展示内容不符合规范，应该用value属性存储用户输入和运算结果，placeholder仅用作输入提示
• HTML中input的type="field"属于无效值，改为type="text"更规范
• deleteBtn点击事件中使用了未定义的btn变量，且-=逻辑不符合字符串删减需求
• divide函数缺少return语句，运算后会返回undefined
• 所有if判断中使用的=是赋值操作，正确的相等判断应该用===

二、变量存储与运算逻辑实现方案 #

你已经提前定义的firstOperand、currentOperator、secondOperand三个变量刚好可以覆盖运算所需的核心存储需求，按以下步骤调整对应逻辑即可：

1. 数字按钮点击逻辑调整 #

每次点击数字时根据是否已选择运算符，将值存入对应操作数变量：

numberButtons.forEach(btn => {
  btn.onclick = function (evt) {
    // 刚选完运算符时清空展示区，准备输入第二个操作数
    if (currentOperator !== null && secondOperand === null) {
      display.value = ''
    }
    display.value += evt.target.value
    // 转成数字存入对应操作数
    if (currentOperator === null) {
      firstOperand = Number(display.value)
    } else {
      secondOperand = Number(display.value)
    }
  }
})

2. 运算符按钮点击逻辑调整 #

点击运算符时将选中的运算符存入currentOperator变量，同时支持连续运算：

operators.forEach(op => {
  op.onclick = function (evt) {
    // 已存在两个操作数和运算符时，先运算上一次的结果再继续
    if (firstOperand !== null && secondOperand !== null && currentOperator !== null) {
      calcResult()
    }
    currentOperator = evt.target.value
    display.value = currentOperator
  }
})

3. 统一运算函数与等号逻辑 #

新增统一运算函数，根据存储的运算符调用对应运算方法，计算结果后更新变量状态：

// 统一运算方法
function calcResult() {
  // 缺少任意运算参数时不执行运算
  if (firstOperand === null || secondOperand === null || currentOperator === null) return
  switch(currentOperator) {
    case '+':
      result = add(firstOperand, secondOperand)
      break
    case '-':
      result = subtract(firstOperand, secondOperand)
      break
    case '*':
      result = multiply(firstOperand, secondOperand)
      break
    case '/':
      // 处理除0异常
      result = secondOperand === 0 ? '错误' : divide(firstOperand, secondOperand)
      break
  }
  display.value = result
  // 运算完成后将结果设为第一个操作数，支持连续运算
  firstOperand = result
  secondOperand = null
  currentOperator = null
}
// 等号点击事件调用运算方法
equalSign.onclick = function () {
  calcResult()
}

4. 其余功能修复 #

// 清空按钮逻辑
clearButton.onclick = function () {
  display.value = ''
  firstOperand = null
  secondOperand = null
  currentOperator = null
  result = null
}
// 删除按钮逻辑
deleteBtn.onclick = function () {
  display.value = display.value.slice(0, -1)
  // 同步更新对应操作数的值
  if (currentOperator === null) {
    firstOperand = display.value ? Number(display.value) : null
  } else {
    secondOperand = display.value ? Number(display.value) : null
  }
}
// 修复除法函数
function divide (a,b) {
  return a / b
}

三、变量流转逻辑说明 #

整个运算流程的变量变化规则如下：

• 用户输入第一个数字 → 自动存入firstOperand变量
• 用户点击运算符 → 自动存入currentOperator变量
• 用户输入第二个数字 → 自动存入secondOperand变量
• 用户点击等号 → 根据三个变量的值计算结果，展示到输入框的同时将结果赋值给firstOperand，可直接输入运算符进行连续运算

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