如何实现计算器按下运算符按钮后自动计算及链式运算功能？

要实现按下运算符时自动计算（比如4+4+4-5无需每步按等号），需要调整运算触发逻辑，在点击新运算符时先完成上一步计算，再将结果作为下一次运算的初始值。以下是具体修改：

关键问题分析 #

当前代码仅在点击等号时触发计算，点击运算符时仅存储第一个数值和运算符，未处理链式运算的中间计算逻辑。

修改后的完整代码 #

function add(x, y) {
    return x + y;
};

function subtract(x, y) {
    return x - y;
};

function multiply(x, y) {
    return x * y;
};

function divide(x, y) {
    // 处理除数为0的情况
    if (y === 0) return "Error";
    return x / y;
};

function operate(firstNum, secondNum, operatorChoice) {
    let firstNumToNumber = parseFloat(firstNum);
    let secondNumToNumber = parseFloat(secondNum);
    let answer;

    switch(operatorChoice) {
        case "+":
            answer = add(firstNumToNumber, secondNumToNumber);
            break;
        case "-":
            answer = subtract(firstNumToNumber, secondNumToNumber);
            break;
        case "/":
            answer = divide(firstNumToNumber, secondNumToNumber);
            break;
        case "*":
            answer = multiply(firstNumToNumber, secondNumToNumber);
            break;
        default:
            answer = secondNumToNumber;
    }

    // 统一更新显示和变量
    displayArea.innerHTML = answer;
    return answer;
};

let answer = "";
let firstNum = "";
let operatorChoice = "";
let displayArea = document.getElementById("display");

// 数字按钮事件
let buttons = document.querySelectorAll(".numbers");
buttons.forEach(button => {
    button.addEventListener("click", (e) => {
        updateDisplay(e.target.innerHTML);
    })
});

function updateDisplay(value) {
    // 如果当前显示是计算结果，点击数字时清空重新输入
    if (!isNaN(parseFloat(displayArea.innerHTML)) && displayArea.innerHTML === answer.toString()) {
        displayArea.innerHTML = "";
    }
    displayArea.innerHTML += value;
}

// 运算符按钮事件
let operateButtons = document.querySelectorAll(".operator");
operateButtons.forEach(button => {
    button.addEventListener("click", (e) => {
        handleOperator(e.target.innerHTML);
    })
});

function handleOperator(newOperator) {
    // 如果已有之前的运算数据，先完成上一步计算
    if (firstNum !== "" && operatorChoice !== "" && displayArea.innerHTML !== "") {
        let currentValue = displayArea.innerHTML;
        answer = operate(firstNum, currentValue, operatorChoice);
        firstNum = answer.toString();
    } else {
        // 第一次点击运算符，存储当前显示的数值
        firstNum = displayArea.innerHTML;
    }
    // 存储新的运算符，清空显示准备输入下一个数
    operatorChoice = newOperator;
    displayArea.innerHTML = "";
}

// 等号按钮事件
let equalButton = document.querySelectorAll(".equal");
equalButton.forEach(button => {
    button.addEventListener("click", () => {
        calculate();
    })
});

function calculate() {
    if (firstNum !== "" && operatorChoice !== "" && displayArea.innerHTML !== "") {
        answer = operate(firstNum, displayArea.innerHTML, operatorChoice);
        // 计算完成后清空运算符，避免连续按等号重复计算
        operatorChoice = "";
        firstNum = answer.toString();
    }
}

// 清空按钮事件
let clearButton = document.querySelectorAll(".reset");
clearButton.forEach(button => {
    button.addEventListener("click", clear);
});

function clear() {
    answer = "";
    firstNum = "";
    operatorChoice = "";
    displayArea.innerHTML = "";
}

修改说明 #

1. 统一运算逻辑：将operate函数的条件判断改为switch，统一返回计算结果，并处理了除数为0的错误情况；同时改用parseFloat支持小数运算。
2. 运算符点击时触发计算：在handleOperator函数中，判断如果已有之前的运算状态（firstNum和operatorChoice不为空，且当前显示有数值），则先调用operate完成上一步计算，将结果作为新的firstNum。
3. 状态管理优化：修复了原代码中变量作用域不一致的问题，清空按钮重置所有状态变量，避免残留数据影响后续运算。
4. 显示逻辑优化：点击数字时如果当前显示是上一次的计算结果，自动清空显示，方便输入新数值。

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