JavaScript计算器连续运算显示异常问题求助

开发小型计算器时遇到以下问题：

• 首次运算（如9 x 3）可正常执行：按下9存入currentNum，按运算符后存入prevNum并在displayPrevResult显示数字与运算符；输入新数字替换currentNum，按等号后计算结果存入result，displayCurrentResult显示结果，displayPrevResult显示完整运算式（如9 x 3 =）。
• 首次运算后，再次按运算符并输入数字时，currentNum会被替换，但displayPrevResult内容不会更新（仍保留9 x 3 =），而是不断追加数字。

期望效果：

• 9 x 3运算后，displayPrevResult显示9 x 3 =，displayCurrentResult显示18；
• 按下+和5后，displayCurrentResult显示上次结果18，displayPrevResult更新为18 + 5，后续可继续运算并显示对应内容。

以下是优化后的代码及逻辑说明：

优化后的JavaScript代码 #

const displayPrevResult = document.querySelector('.prev-result');
const displayCurrentResult = document.querySelector('.current-result');
const equal = document.querySelector('.equal');
const decimal = document.querySelector('.decimal');
const clear = document.querySelector('.clear');

const numberBtn = document.querySelectorAll('.number');
const operatorBtn = document.querySelectorAll('.operator');

let prevNum = '';
let currentNum = '';
let result = '';
let operator = '';

equal.addEventListener('click', calculate);
clear.addEventListener('click', clearCalc);

numberBtn.forEach((button) => {
    button.addEventListener('click', (e) => {
        getNumber(e.target.textContent);
    })
})

operatorBtn.forEach((button) => {
    button.addEventListener('click', (e) => {
        getOperator(e.target.textContent);
    })
})

function calculate() {
    // 如果没有运算符或当前数字为空，直接返回
    if (!operator || !currentNum) return;

    prevNum = Number(prevNum || result);
    currentNum = Number(currentNum);

    switch(operator) {
        case '+':
            result = prevNum + currentNum;
            break;
        case '-':
            result = prevNum - currentNum;
            break;
        case 'x':
            result = prevNum * currentNum;
            break;
        case '÷':
            result = currentNum !== 0 ? prevNum / currentNum : 'Error';
            break;
    }

    // 更新显示：上方完整运算式，下方结果
    displayPrevResult.textContent = `${prevNum} ${operator} ${currentNum} =`;
    displayCurrentResult.textContent = result;
    
    // 重置状态，为下一次运算准备
    currentNum = '';
    operator = '';
}

function getNumber(num) {
    // 如果当前显示的是结果，点击数字时重置当前数字
    if (result && !operator) {
        currentNum = num;
        result = '';
    } else {
        currentNum += num;
    }
    displayCurrentResult.textContent = currentNum;
}

function getOperator(op) {
    // 如果已有结果，直接用结果作为上一个数字
    if (result) {
        prevNum = result;
        result = '';
    } 
    // 如果当前有输入的数字，赋值给prevNum
    else if (currentNum) {
        prevNum = currentNum;
        currentNum = '';
    }
    // 如果没有prevNum但有结果（比如连续按运算符），保持prevNum为结果
    else if (!prevNum && result) {
        prevNum = result;
    }

    operator = op;
    // 更新上方显示的运算式前缀
    displayPrevResult.textContent = `${prevNum} ${operator}`;
    // 当前显示保持为上一个数字/结果
    displayCurrentResult.textContent = prevNum;
}

function clearCalc() {
    prevNum = '';
    currentNum = '';
    result = '';
    operator = '';

    displayPrevResult.textContent = '';
    displayCurrentResult.textContent = '0';
}

CSS代码（无需修改） #

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calcContainer {
    background: linear-gradient(276deg, #40a179, #77cea9);
    padding: 1em;
    border-radius: 5px;
    border: 1px solid #000;
}

button {
    padding: 1em;
    margin: 0.1em;
    width: 40px;
    background: #a2ffaf;
    border: 1px solid #fff;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background: #72e782;
}

.clr {
    background: #87e4bd;
}

.clr:hover {
    background: #53ad88;
}

.clear {
    margin: 0em 0.1em 0.5em 0.5em;
    padding: 0;
}

.output-clear-container {
    display: flex;
}

.output {
    flex-grow: 1;
    height: 40px;
    background: #c2fcca;
    border-radius: 5px;
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 0.5em;
    margin-bottom: 0.5em;
}

.par {
    margin-bottom: 0.3em;
}

.prev-result {
    font-size: 14px;
    padding-bottom: 0.3em;
    color:#40a179;
}

.current-result {
    font-size: 18px;
}

HTML代码（无需修改） #

<!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="styles.css">
    <script src="main.js" defer></script>
    <title>Calculator</title>
</head>
<body>
    <div class="calcContainer">
        <div class="output-clear-container">
            <div class="output">
                <div class="prev-result"></div>
                <div class="current-result">0</div>
            </div>
            <button class="clear">AC</button>
        </div>
            <div class="par">
                <button class="number">7</button>
                <button class="number">8</button>
                <button class="number">9</button>
                <button class="operator clr">÷</button>
            </div>
            <div class="par">
                <button class="number">4</button>
                <button class="number">5</button>
                <button class="number">6</button>
                <button class="operator clr">x</button>
            </div>
            <div class="par">
                <button class="number">1</button>
                <button class="number">2</button>
                <button class="number">3</button>
                <button class="operator clr">-</button>
            </div>
            <div class="par">
                <button class="decimal clr">.</button>
                <button class="number">0</button>
                <button class="equal clr">=</button>
                <button class="operator clr">+</button>
            </div>
    </div>
</body>
</html>

核心修改点 #

1. getOperator函数优化：

   • 当已有运算结果时，点击运算符直接将结果作为prevNum，并更新displayPrevResult为结果 + 运算符
   • 移除原有的operator === ''限制，支持连续运算场景
   • 确保displayCurrentResult显示当前的prevNum（即上次结果或输入的数字）

2. calculate函数优化：

   • 使用switch语句替代多个if，逻辑更清晰
   • 增加除数为0的错误判断
   • 直接赋值displayPrevResult为完整运算式，避免追加导致的旧内容残留
   • 运算完成后重置operator和currentNum，为下一次运算准备

3. getNumber函数优化：

   • 如果当前显示的是运算结果，点击数字时重置currentNum，开始新的数字输入

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