HTML/CSS/JS计算器calculate函数异常：点击等号仅显示最后输入值

问题描述 #

学习制作HTML/CSS/JavaScript计算器时，完成calculate()函数后，点击等号按钮能正常显示待计算的数值和运算符，但结果屏幕仅展示最后输入的数值（例如输入9+3，点击等号后显示3而非12）。

代码示例 #

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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
    <title>Calculator</title>
</head>
<body>
    <h1>Calculator</h1>
    <div class="calculator">
        <div>
            <div class="first-row">
                <div class="result">
                    <div class="previous"></div>
                    <div class="current"></div>
                </div>
                <button class="clear btn">C</button>
            </div>
            <div class="buttons">
                <button class="number btn">7</button>
                <button class="number btn">8</button>
                <button class="number btn">9</button>
                <button class="operator btn">/</button>
            </div>
            <div class="buttons">
                <button class="number btn">4</button>
                <button class="number btn">5</button>
                <button class="number btn">6</button>
                <button class="operator btn">X</button>
            </div>
            <div class="buttons">
                <button class="number btn">1</button>
                <button class="number btn">2</button>
                <button class="number btn">3</button>
                <button class="operator btn">-</button>
            </div>
            <div class="buttons">
                <button class="decimal btn">.</button>
                <button class="number btn">0</button>
                <button class="equal btn">=</button>
                <button class="operator btn">+</button>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript代码 #

let operator = '';
let previousValue = '';
let currentValue = '';

document.addEventListener("DOMContentLoaded", function(){
    let clear = document.querySelector(".clear.btn");
    let equal = document.querySelector(".equal");
    let decimal = document.querySelector(".decimal");
    let numbers = document.querySelectorAll(".number");
    let operators = document.querySelectorAll(".operator");
    let previousScreen = document.querySelector(".previous");
    let currentScreen = document.querySelector(".current");

    numbers.forEach((number) => number.addEventListener("click", function(e){
        handleNumber(e.target.textContent)
        currentScreen.textContent = currentValue;
    }))

    operators.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(){
        calculate();
        previousScreen.textContent= '';
        currentScreen.textConent = previousValue; // 拼写错误位置
    })
})

function handleNumber(num){
    if(currentValue.length <=8){
        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 === "X"){
        previousValue *= currentValue;
    }else{
        previousValue /= currentValue;
    }

    previousValue = roundNumber(previousValue);
    previousValue = previousValue.toString();
    currentValue = previousValue.toString();
}

function roundNumber(num){
    return Math.round(num * 1000) /1000;
}

修复方案 #

1. 修正核心拼写错误 #

在equal按钮的点击事件中，currentScreen.textConent是拼写错误，正确属性名为textContent，这是结果无法渲染到屏幕的直接原因：

equal.addEventListener("click", function(){
    calculate();
    previousScreen.textContent= '';
    currentScreen.textContent = previousValue; // 修正拼写
})

2. 优化计算逻辑（可选） #

为支持连续计算，建议在calculate()函数中重置currentValue，并处理除以0的异常情况：

function calculate(){
    previousValue = Number(previousValue);
    currentValue = Number(currentValue);

    switch(operator){
        case "+":
            previousValue += currentValue;
            break;
        case "-":
            previousValue -= currentValue;
            break;
        case "X":
            previousValue *= currentValue;
            break;
        case "/":
            // 避免除以0出现Infinity
            previousValue = currentValue !== 0 ? previousValue / currentValue : "Error";
            break;
        default:
            return;
    }

    // 仅对数字结果做小数处理
    if(typeof previousValue === "number"){
        previousValue = roundNumber(previousValue);
    }
    previousValue = previousValue.toString();
    currentValue = ''; // 重置currentValue，方便后续输入新数值
}

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