JS计算器连续运算变量赋值错误问题求助

问题分析 #

首次运算（如5+3=）能得到正确结果8，但用该结果继续计算（如接着输入-2=）时，得到错误结果1而非预期的6。核心原因是：点击等号得到结果后，再次点击运算符时，disNum2被赋值为上一次运算的第二个数（此时disNum1的值），而非上一次的最终计算结果。

修复方案 #

需要在两个关键逻辑点调整变量赋值规则：

1. 点击等号后同步结果到计算变量 #

点击等号得到结果后，将结果赋值给disNum1，让它成为下一次计算的起始值；同时清空disNum2和result，避免后续逻辑混淆。

修改dataEquals的事件处理函数：

dataEquals.addEventListener("click", () => {
    hasDot = false;
    hasZero = false;
    mathOperation();
    myInput.value = result; 
    // 将结果同步给disNum1，作为下一次计算的第一个数
    disNum1 = result.toString();
    disNum2 = '';
    result = '';
})

2. 点击运算符时优先使用上一次结果 #

点击运算符时，判断是否存在未使用的计算结果（result不为空），如果有则将结果赋值给disNum2；否则沿用原逻辑使用disNum1。

修改dataOperators的事件处理函数：

dataOperators.forEach((operation) => {
    operation.addEventListener('click', (e) => {
        hasDot = false;
        hasZero = false;
        const clickedOp = e.target.innerText
        lastOperation = clickedOp;
        myOperator.value = clickedOp;
        // 优先使用上一次计算结果作为disNum2
        disNum2 = result !== '' ? result : disNum1;
        result = '';
        disNum1 = '';
   })
})

完整修复后的JavaScript代码 #

const myInput = document.querySelector('#result');
const myOperator = document.querySelector('#operator');
const dataNumbers = document.querySelectorAll('.dataNumber');
const dataOperators = document.querySelectorAll('.dataOperator');
const dataEquals = document.querySelector('.dataEquals');
const dataClear = document.querySelector('.dataClear');

let disNum1 = ''; 
let disNum2 = ''; 
let result = '';
let hasDot = false;
let hasZero = false;
let lastOperation = '';

dataNumbers.forEach((number) => {
    number.addEventListener('click',(e) => {
        const clickedNum = e.target.innerText;
        if (clickedNum === '.' && !hasDot) {
            hasDot = true;
        } else if (clickedNum === '.' && hasDot) {
            return;
        }
        
        if (clickedNum === '.' && !hasZero) {
            hasZero = true;
        } else if (clickedNum === '.' && hasZero) {
            return;
        }
        
        disNum1 += clickedNum;
        myInput.value = disNum1;
    })
})

dataOperators.forEach((operation) => {
    operation.addEventListener('click', (e) => {
        hasDot = false;
        hasZero = false;
        const clickedOp = e.target.innerText
        lastOperation = clickedOp;
        myOperator.value = clickedOp;
        disNum2 = result !== '' ? result : disNum1;
        result = '';
        disNum1 = '';
   })
})

function mathOperation() {
    if (lastOperation === 'x') {
        result = parseFloat(disNum2) * parseFloat(disNum1);
    } else if (lastOperation === "+") {
        result = parseFloat(disNum2) + parseFloat(disNum1);
    } else if (lastOperation === "-") {
        result = parseFloat(disNum2) - parseFloat(disNum1);
    } else if (lastOperation === "/") {
        result = parseFloat(disNum2) / parseFloat(disNum1);
    } else if (lastOperation === "%") {
        result = parseFloat(disNum2) % parseFloat(disNum1);
    }
}

dataEquals.addEventListener("click", () => {
    hasDot = false;
    hasZero = false;
    mathOperation();
    myInput.value = result; 
    disNum1 = result.toString();
    disNum2 = '';
    result = '';
})

额外优化建议 #

• 补充dataClear的事件处理函数，实现清空所有变量和输入框的功能：

dataClear.addEventListener('click', () => {
    disNum1 = '';
    disNum2 = '';
    result = '';
    hasDot = false;
    hasZero = false;
    lastOperation = '';
    myInput.value = '';
    myOperator.value = '';
})

• 调整hasZero的逻辑，当前代码仅针对小数点做判断，可优化为处理数字开头的多个0（如避免输入0005这类无效格式）。

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