Odin Project计算器任务：链式多步运算功能实现技术求助

问题描述 #

正在完成Odin Project的计算器任务，已实现单步计算功能，但无法支持多步链式运算。需求是让用户能连续执行多个运算，每次计算一对数值，例如输入12 + 7 - 5 * 3 =应得到结果42。

当前实现代码 #

JavaScript代码 #

// 全局变量
let operator = '';
let previousValue = '';
let currentValue = '';

// DOM 元素
document.addEventListener("DOMContentLoaded", function() {
  // 获取所有元素
  let clear = document.querySelector("#clear-btn");
  let equal = document.querySelector(".equal");
  let decimal = document.querySelector(".decimal");

  let number = document.querySelectorAll(".number");
  let operatorButtons = document.querySelectorAll(".operator");

  let previousScreen = document.querySelector(".previous");
  let currentScreen = document.querySelector(".current");

  // 为所有数字按钮添加事件监听
  number.forEach((number) => number.addEventListener("click", function(e) {
    handleNumber(e.target.textContent);
    currentScreen.textContent = currentValue;
  }));

  // 为所有运算符按钮添加事件监听
  operatorButtons.forEach((op) => op.addEventListener("click", function(e) {
    handleOperator(e.target.textContent)
    previousScreen.textContent = previousValue + " " + operator;
    currentScreen.textContent = currentValue;
  }));
  // 清除按钮事件
  clear.addEventListener("click", function() {
    previousValue = '';
    currentValue = '';
    operator = '';
    previousScreen.textContent = currentValue;
    currentScreen.textContent = currentValue;
  })

  // 等于按钮事件监听
  equal.addEventListener("click", function() {
    if (currentValue != '' && previousValue != '') {
      calculate()
      previousScreen.textContent = '';
      // 修复原语法错误：previousValue, length 改为 previousValue.length
      if (previousValue.length <= 5) {
        currentScreen.textContent = previousValue;
      } else {
        currentScreen.textContent = previousValue.slice(0, 5) + "..."
      }
    }
  })
})

// 限制当前输入值长度为5位
function handleNumber(num) {
  if (currentValue.length <= 5) {
    currentValue += num;
  }
}

// 更新运算符变量，将当前值转移到上一个值，为下一次输入做准备
function handleOperator(op) {
  operator = op;
  previousValue = currentValue;
  currentValue = '';
}

// 计算函数
function calculate() {
  previousValue = Number(previousValue);
  currentValue = Number(currentValue);
  // 运算符逻辑
  if (operator === "+") {
    previousValue += currentValue;
  } else if (operator === "-") {
    previousValue -= currentValue;
  } else if (operator === "/") {
    previousValue /= currentValue;
  } else if (operator === "x") { // 匹配HTML中的乘号按钮文本
    previousValue *= currentValue
  }
  // 四舍五入
  previousValue = roundNumber(previousValue);
};

// 数值四舍五入函数
function roundNumber(num) {
  return Math.round(num * 1000) / 1000
}

HTML代码 #

<h1>计算器</h1>

<!-- 黑色边框 -->

<div class="calculator">
  <div class="first-row">
    <div id="display">
      <div class="previous"></div>
      <div class="current"></div>
    </div>
    <button id="clear-btn" class="btn">C</button>
  </div>
  <div class="other-rows">
    <button class="btn number">7</button>
    <button class="btn number">8</button>
    <button class="btn number">9</button>
    <button class="btn operator divide">/</button>
  </div>
  <div class="other-rows">
    <button class="btn number">4</button>
    <button class="btn number">5</button>
    <button class="btn number">6</button>
    <button class="btn operator">x</button>
  </div>
  <div class="other-rows">
    <button class="btn number">1</button>
    <button class="btn number">2</button>
    <button class="btn number">3</button>
    <button class="btn operator">-</button>
  </div>
  <div class="other-rows">
    <button class="btn number">0</button>
    <button class="btn decimal">.</button>
    <button class="btn equal">=</button>
    <button class="btn operator">+</button>
  </div>
</div>

<script src="main.js"></script>

多步链式运算实现修改方案 #

核心修改点 #

当前代码的问题在于点击新运算符时，仅切换运算符和转移值，未完成上一步计算。要实现链式运算，需在切换运算符前，先完成已有运算的计算。

1. 修改handleOperator函数

function handleOperator(op) {
  // 如果已有未完成的运算，先执行计算
  if (previousValue !== '' && operator !== '' && currentValue !== '') {
    calculate();
    // 将计算结果转为字符串，方便后续显示拼接
    previousValue = previousValue.toString();
  }
  operator = op;
  // 若当前值不为空，才更新上一个值（避免连续点击运算符清空结果）
  if (currentValue !== '') {
    previousValue = currentValue;
  }
  currentValue = '';
}

2. 优化equal按钮逻辑

equal.addEventListener("click", function() {
  if (currentValue != '' && previousValue != '') {
    calculate()
    previousScreen.textContent = '';
    const resultStr = previousValue.toString();
    if (resultStr.length <= 5) {
      currentScreen.textContent = resultStr;
    } else {
      currentScreen.textContent = resultStr.slice(0, 5) + "..."
    }
    // 计算完成后清空运算符，防止连续点击等于号重复计算
    operator = '';
    currentValue = '';
  }
})

效果说明 #

修改后，计算器支持链式运算：

• 输入12 + 7后点击-，会先计算12+7=19，将19作为previousValue等待下一个输入；
• 输入5后点击*，计算19-5=14，再输入3点击=，最终得到14*3=42的正确结果。

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