如何在JavaScript计算器应用中获取第二个操作数

要实现你需要的逻辑，核心是添加一个状态变量标记是否已按下运算符，以此区分当前输入的数字该存入prevNum还是currentNum，同时修复HTML中部分按钮缺失value的问题。以下是修改后的完整代码：

修改后的JavaScript代码 #

let inputField = document.querySelector('.input-filed');
let elements = document.querySelectorAll('.element');

let prevNum, currentNum, operator;
// 新增状态变量：标记是否已按下运算符
let operatorSelected = false;

elements.forEach((element) =>
  element.addEventListener('click', () => {
    if (/^\d+$/.test(element.value) || element.value === '.') {
      // 处理数字和小数点
      if (!operatorSelected) {
        // 未按下运算符时，更新输入框和prevNum
        inputField.value += element.value;
        prevNum = parseFloat(inputField.value);
      } else {
        // 已按下运算符时，收集currentNum（输入框保持显示prevNum）
        currentNum = currentNum ? currentNum + element.value : element.value;
        currentNum = parseFloat(currentNum);
        console.log('currentNum updated: ', currentNum);
      }
    } else if (element.value === 'C') {
      // 重置所有状态和变量
      inputField.value = '';
      prevNum = null;
      currentNum = null;
      operator = null;
      operatorSelected = false;
    } else if (
      element.value === '+' ||
      element.value === '-' ||
      element.value === 'x' ||
      element.value === '/'
    ) {
      operator = element.value;
      operatorSelected = true; // 标记已按下运算符
      console.log('prevNum: ' + prevNum);
      console.log('operator: ' + operator);
    } else if (element.value === '=') {
      if (!prevNum || !currentNum || !operator) return;
      
      // 执行四则运算
      let result;
      switch(operator) {
        case '+':
          result = prevNum + currentNum;
          break;
        case '-':
          result = prevNum - currentNum;
          break;
        case 'x':
          result = prevNum * currentNum;
          break;
        case '/':
          result = prevNum / currentNum;
          break;
        default:
          result = 0;
      }
      
      console.log('计算结果: ' + result);
      // 计算完成后重置状态，结果作为新的prevNum支持后续计算
      inputField.value = result;
      prevNum = result;
      currentNum = null;
      operator = null;
      operatorSelected = false;
    }
  })
);

修改后的HTML代码（修复按钮value缺失问题） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Calculator</title>
</head>
<body>
    <h1 class="title">Simple Calculator</h1>
    <div class="container">

        <input type="text" class="input-filed" placeholder="select number"/>

        <div class="sib"> 

            <div class="buttons">
                <div>
                    <button class="element special" value="C">C</button>
                    <button class="element special" value="+/-">+/-</button>
                    <button class="element special" value="%">%</button>
                </div>

                <div> 
                    <button class="element number" value="7">7</button>
                    <button class="element number" value="8">8</button>
                    <button class="element number" value="9">9</button>
                </div>

                <div> 
                    <button class="element number" value="4">4</button>
                    <button class="element number" value="5">5</button>
                    <button class="element number" value="6">6</button>
                </div>

                <div> 
                    <button class="element number" value="1">1</button>
                    <button class="element number" value="2">2</button>
                    <button class="element number" value="3">3</button>
                </div>

                <div class="element-two-wrap">
                    <!-- 补全0按钮的value -->
                    <button class="element expand-zero" value="0">0</button>
                    <!-- 补全.按钮的value -->
                    <button class="element" value=".">.</button>
                </div>

            </div>

            <div class="operation-buttons">
                <button class="element operation-element" value="/">÷</button>
                <button class="element operation-element" value="x">x</button>
                <button class="element operation-element" value="-">-</button>
                <button class="element operation-element" value="+">+</button>
                <button class="element operation-element" value="=">=</button>
            </div>
    </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

关键改动说明 #

• 状态变量operatorSelected：用来区分当前处于“输入第一个数”还是“输入第二个数”的阶段，按下运算符后设为true，后续数字按键直接存入currentNum，不修改输入框内容。
• 数字输入逻辑：未按下运算符时，正常更新输入框和prevNum；按下运算符后，单独收集数字到currentNum，输入框保持显示prevNum。
• 类型转换：将prevNum和currentNum转为浮点数，支持小数计算，避免字符串拼接导致的计算错误。
• 重置功能：点击C按钮时，重置所有变量和状态，恢复初始状态。
• 计算逻辑：在=按钮事件中实现四则运算，计算完成后将结果设为新的prevNum，支持连续计算。

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