Javascript：使计算器点击运算符后显示结果

Question

在 Javascript 中，我正在制作一个简单的计算器。 我希望它不仅在使用等于按钮后显示表达式的结果，而且在单击新运算符开始新方程式时也显示。

示例：点击 2 然后 + 并存储为 firstNum，然后点击 3 并且 output 显示 5，然后替换 firstNum

 const btns = document.querySelector('.button'); const input = document.querySelector('#txtresult') let btn = { zero: document.querySelector('#zero'), one: document.querySelector('#one'), two: document.querySelector('#two'), three: document.querySelector('#three'), four: document.querySelector('#four'), five: document.querySelector('#five'), six: document.querySelector('#six'), seven: document.querySelector('#seven'), eight: document.querySelector('#eight'), nine: document.querySelector('#nine'), add: document.querySelector('#add'), subtract: document.querySelector('#subtract'), multiply: document.querySelector('#multiply'), divide: document.querySelector('#divide'), dot: document.querySelector('#dot'), equal: document.querySelector('#equal'), clear: document.querySelector('#clear'), } let firstVal; let secondVal; let operator; function storeNum(op) { firstVal = parseFloat(input.value); input.value = op; operator = op; return firstVal; } function storeSec() { secondVal = parseFloat(input.value); input.value = operate(firstVal, secondVal, operator); } const removeZero = () => (input.value === '0')? input.value = '': false; const removeOp = () => (input.value === '+' || input.value === '/' || input.value === '*' || input.value === '-')? input.value = '': false; function operate(x, y, operator) { if (operator === '+') { return add(x, y); } else if (operator === '-') { return subtract(x, y); } else if (operator === '*') { return multiply(x, y); } else if (operator === '/') { return divide(x, y); } } function click() { btn.zero.addEventListener('click', () => { removeZero(); removeOp(); input.value += 0; }); btn.one.addEventListener('click', () => { removeZero(); removeOp(); input.value += 1; }); btn.two.addEventListener('click', () => { removeZero(); removeOp(); input.value += 2; }); btn.three.addEventListener('click', () => { removeZero(); removeOp(); input.value += 3; }); btn.four.addEventListener('click', () => { removeZero(); removeOp(); input.value += 4; }); btn.five.addEventListener('click', () => { removeZero(); removeOp(); input.value += 5; }); btn.six.addEventListener('click', () => { removeZero(); removeOp(); input.value += 6; }); btn.seven.addEventListener('click', () => { removeZero(); removeOp(); input.value += 7; }); btn.eight.addEventListener('click', () => { removeZero(); removeOp(); input.value += 8; }); btn.nine.addEventListener('click', () => { removeZero(); removeOp(); input.value += 9; }); btn.divide.addEventListener('click', () => { storeNum('/'); }); btn.multiply.addEventListener('click', () => { storeNum('*'); }); btn.subtract.addEventListener('click', () => { storeNum('-'); }); btn.add.addEventListener('click', () => { storeNum('+'); }); btn.dot.addEventListener('click', () => { input.value += '.'; }); btn.clear.addEventListener('click', () => { firstVal = 0; secondVal = 0; input.value = 0; }); btn.equal.addEventListener('click', () => { storeSec(); }); } function add(x, y) { const num = x + y; const rounded = Math.round(num * 1000) / 1000; return rounded; } function subtract(x, y) { const num = x - y; const rounded = Math.round(num * 1000) / 1000; return rounded; } function multiply(x, y) { const num = x * y; const rounded = Math.round(num * 1000) / 1000; return rounded; } function divide(x, y) { if(x === 0 && y === 0) { return 'no'; } const num = x / y; const rounded = Math.round(num * 1000) / 1000; return rounded; } click();

 body { display: flex; justify-content: center; } button { font-size: 15px; display: flex; flex: 1; font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #8e8e8e; background-color: #ccc; border: none; border-radius: 8px; box-shadow: 0 9px #999; font-family: sans-serif; } button:active { box-shadow: 0 5px #666; transform: translateY(4px); } #split { display: flex; flex: 1; margin-top: 12px; justify-content: center; border-radius: 10px; } #container { display: flex; width: 500px; height: 300px; padding: 20px; flex-direction: column; border-radius: 10px; background-color: #DEDEDE; } #top { display: flex; flex: 1; margin: 5px; border-radius: 10px; } #txtresult { display: flex; flex: 1; margin: 5px; border-radius: 10px; background-color: #ccc; border: none; font-size: 50px; font-family: 'M PLUS 1p', sans-serif; text-align: right; padding-right: 10px; color: #8e8e8e; } #txtresult:hover { background-color: #bfbfbf; box-shadow: none; border-color: transparent; } #txtresult:focus { outline: 2px solid grey; box-shadow: none; border-color: transparent; } #buttons { display: flex; flex: 3; margin: 5px; }.row { display: flex; flex: 1; flex-direction: column; }.button { display: flex; flex: 1; margin: 10px; justify-content: center; border-radius: 10px; } #reset { font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #8e8e8e; background-color: #ccc; border: none; border-radius: 8px; box-shadow: 0 9px #999; font-family: sans-serif; } #reset:active { box-shadow: 0 5px #666; transform: translateY(4px); }

 <:DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>calculator</title> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=M+PLUS+1p;wght@400.500&display=swap" rel="stylesheet"> </head> <body> <div id='container'> <input type='text' id='txtresult'> <div id='buttons'> <div class=row> <div class=button id='seven'><button>7</button></div> <div class=button id='four'><button>4</button></div> <div class=button id='one'><button>1</button></div> <div class=button id='zero'><button>0</button></div> </div> <div class=row> <div class=button id='eight'><button>8</button></div> <div class=button id='five'><button>5</button></div> <div class=button id='two'><button>2</button></div> <div class=button id='dot'><button>.</button></div> </div> <div class=row> <div class=button id='nine'><button>9</button></div> <div class=button id='six'><button>6</button></div> <div class=button id='three'><button>3</button></div> <div id='split'> <div class=button id='clear'><button>c</button></div> <div class=button id='equal'><button>=</button></div> </div> </div> <div class=row> <div class=button id='divide'><button>/</button></div> <div class=button id='multiply'><button>*</button></div> <div class=button id='subtract'><button>-</button></div> <div class=button id='add'><button>+</button></div> </div> </div> </div> </body> </html>

有任何想法吗？

Answer 1

错误在你的 JS 中，这个 function 使它工作：

首先，我创建了 function automaticResult 。 它标识何时设置运算符和 firstVal 变量。 我这样做是因为如果这个条件为真，下一个按下的值就是第二个值，所以我们只需要调用storeSec()计算并显示操作：

function automaticResult() {
    if (firstVal, operator) {
        storeSec();
    }
}

在此之后，您可以将此 function 传递给脚本中的每个数字按钮：

    btn.zero.addEventListener('click', () => {
        removeZero();
        removeOp();
        input.value += 0;
        automaticResult(); // <-- the function call here
    });
    btn.one.addEventListener('click', () => {
        removeZero();
        removeOp();
        input.value += 1;
        automaticResult(); // here too
    });
    /* the buttons from 0 to 9 has this function */

然后你只需要输入数字。例如，如果你再次按下按钮 5，按钮 + 和按钮 5，第二次按下按钮 5，它会自动显示 10。

我希望我帮助了你:)