如何在双屏显示的JavaScript计算器中实现运算功能

你需要在原有JS代码基础上新增3个变量，分别用来存储第一个运算数、判断是否需要清空数字输入框，调整后的完整JS代码如下：

const myInput = document.getElementById('result');
const myOperator = document.getElementById('operator');
// 新增存储变量
let firstNum = ''; // 存储第一个运算数
let shouldClear = false; // 标记接下来输入数字时是否清空当前显示屏

// 数字输入函数
function addNumber(clickedNumber){
    // 标记为清空状态时，先清空输入框再写入新数字，同时重置标记
    if(shouldClear) {
        myInput.value = '';
        shouldClear = false;
    }
    myInput.value += clickedNumber;
}

// 运算符选择函数
function addOperator(clickedOperator){
    // 点击运算符时，把当前显示屏的数字存为第一个运算数
    firstNum = myInput.value;
    myOperator.value = clickedOperator;
    // 标记后续输入新数字时要清空显示屏
    shouldClear = true;
}

// 新增等于运算函数
function equals() {
    // 运算参数不全时不执行计算
    if(!firstNum || !myOperator.value || !myInput.value) return;
    const secondNum = myInput.value;
    let result = 0;
    // 按选中的运算符执行计算
    switch(myOperator.value) {
        case '+':
            result = Number(firstNum) + Number(secondNum);
            break;
        case '-':
            result = Number(firstNum) - Number(secondNum);
            break;
        case '*':
            result = Number(firstNum) * Number(secondNum);
            break;
        case '/':
            if(Number(secondNum) === 0) {
                alert('除数不能为0');
                cancel();
                return;
            }
            result = Number(firstNum) / Number(secondNum);
            break;
    }
    // 展示计算结果，重置状态
    myInput.value = result;
    myOperator.value = '';
    firstNum = '';
    shouldClear = true;
}

// 清空函数
function cancel() {
    myInput.value = '';
    myOperator.value = '';
    firstNum = '';
    shouldClear = false;
}

核心实现逻辑：

• 点击运算符时，把当前显示屏的数字存入firstNum变量永久保留，同时打开shouldClear清空标记
• 后续输入第二个运算数时，检测到shouldClear为true就先清空当前显示屏再写入新数字，不会影响已经存储好的第一个运算数
• 点击等于号时，取出存储的第一个运算数、运算符、当前显示屏的第二个运算数完成计算即可

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