Odin项目JavaScript计算器：等号按钮无法计算问题求助

核心问题拆解 #

你的代码能正常显示输入内容，但完全没实现计算逻辑所需的状态管理，导致等号点击后没有计算动作，具体错误点如下：

• 点击运算符时，仅把符号追加到屏幕，没有将当前输入的数字存入num1，也没记录选中的运算符类型
• num1和num2始终是空字符串，operate函数拿不到有效计算数值
• operate函数里错误地用DOM元素集合operators和运算符字符串比较，条件永远不成立；而且计算后没有把结果更新到屏幕
• 等号点击时还在追加=符号到屏幕，正确逻辑应该是直接计算并显示结果

修复后的完整JS代码 #

const screen = document.querySelector('.screen')
const clear = document.querySelector('.clear')
const numberButtons = document.querySelectorAll('.numbers')
const operators = document.querySelectorAll('.operators')
const equal = document.querySelector('.equal')

let currentValue = ''
let num1 = ''
let num2 = ''
let selectedOperator = '' // 新增：存储选中的运算符

// 数字按钮逻辑
numberButtons.forEach(numberButton => {
  numberButton.addEventListener("click", () => {
    // 如果已经选过运算符，开始输入num2，否则输入num1
    if (selectedOperator) {
      currentValue += numberButton.value
      screen.textContent = num1 + selectedOperator + currentValue
    } else {
      currentValue += numberButton.value
      screen.textContent = currentValue
    }
  })
})

// 计算核心函数
function operate() {
  num1 = parseFloat(num1)
  num2 = parseFloat(num2)
  let result = 0
  switch(selectedOperator) {
    case '+':
      result = num1 + num2
      break
    case '-':
      result = num1 - num2
      break
    case '*':
      result = num1 * num2
      break
    case '/':
      // 避免除零错误
      result = num2 !== 0 ? num1 / num2 : 'Error'
      break
  }
  // 更新屏幕显示结果，重置状态以便后续计算
  screen.textContent = result
  currentValue = result.toString()
  num1 = result.toString()
  num2 = ''
  selectedOperator = ''
}

// 运算符按钮逻辑
operators.forEach(operatorBtn => {
  operatorBtn.addEventListener("click", () => {
    // 只有当前有输入时才允许选运算符
    if (currentValue) {
      num1 = currentValue // 把当前输入存为num1
      selectedOperator = operatorBtn.value // 记录选中的运算符
      currentValue = '' // 重置当前输入，准备输入num2
      screen.textContent = num1 + selectedOperator
    }
  })
})

// 等号按钮逻辑
equal.addEventListener("click", () => {
  // 确保num1、运算符、num2都存在才执行计算
  if (num1 && selectedOperator && currentValue) {
    num2 = currentValue
    operate()
  }
})

// 清空按钮逻辑
clear.addEventListener('click', () => {
  screen.textContent = ''
  currentValue = ''
  num1 = ''
  num2 = ''
  selectedOperator = ''
})

修复说明 #

1. 新增selectedOperator变量存储用户选中的运算符类型
2. 运算符点击时，将当前输入的数字存入num1，重置currentValue准备输入第二个数字
3. 等号点击时，将当前输入存入num2，调用operate执行计算，并把结果更新到屏幕
4. 优化operate函数，用switch替代冗余的if-else，增加除零错误处理
5. 清空按钮不再刷新页面，而是重置所有状态变量和屏幕显示

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