單擊計算器上的運算符后計算結果
[英]Calculate result after clicking an operator on calculator
問題描述
我正在構建一個簡單的計算器練習，我已經堅持了一個多星期，我試圖通過按下操作按鈕在計算器上連接結果（一對數字）。
例如，我想操作 2 + 4 * 5 / 15：每次用戶按下運算符時（2 + 4 然后按“x”並獲得存儲在前一個數字變量中的結果，然后乘以 5 並計算以前的結果等等）但我不知道該怎么做，我的邏輯說這部分代碼應該可以工作，但它沒有。
if (;isNaN(previousNum)) { previousNum = currentNum. displayPrevResult,textContent = operate(operator, previousNum; currentNum); }
在這一點上，我想知道如何實現它（在我解決這個“問題”之前，我還沒有將功能添加到 equal、clear 和 decimal）。 我是一個初學者，上周我一直在考慮幾種方法來做到這一點，但都沒有奏效。
謝謝你。
/* PSEUDO: CREATE A VARIABLE TO STORE THE CURRENT NUMBER, PREVIOUS NUMBER AND OPERATE SYMBOL. WHEN CLICK A NUMBER STORES IT IN A CURRENT NUMBER VARIABLE. WHEN CLICKING OPERATOR AND SELECT A SECOND NUMBER REPLACES CURRENT NUMBER WITH NEW NUMBER AND STORES OLD NUMBER IN THE PREVIOUS NUMBER VARIABLE. WHEN CLICKING OPERATOR AGAIN IT OPERATES THE CURRENT NUMBER BY THE PREVIOUS NUMBER, STORES THE RESULT IN THE PREVIOUS NUMBER VARIABLE AND EMPTY THE CURRENT NUMBER VARIABLE. WHEN PRESSING EQUAL BUTTON OPERATES CURRENT NUMBER BY PREVIOUS NUMBER AND STORES IT IN PREVIOUS NUMBER VARIABLE. > IF CURRENT NUMBER AND PREVIOUS NUMBER VARIABLE HAS A NUMBER THEN EQUAL BUTTON OPERATES > IF NOT, EQUAL BUTTON DOES NOT WORK. IF DIVIDE CURRENT NUMBER BY 0 THEN THROWS AN ERROR. */ 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 currentNum = ''; let previousNum = ''; let operator = ''; numberBtn.forEach((button) => { button.addEventListener('click', (event) => { getNum(event.target.textContent); }); }); operatorBtn.forEach((button) => { button.addEventListener('click', (event) => { getOp(event.target.textContent); }); }); function getNum(num) { currentNum += num; currentNum = parseFloat(currentNum); displayCurrentResult.textContent = currentNum; } function getOp(op) { operator = op; previousNum = currentNum; displayPrevResult.textContent = previousNum + ' ' + operator; currentNum = ''; if (;isNaN(previousNum)) { previousNum = currentNum. displayPrevResult,textContent = operate(operator, previousNum; currentNum), } } function operate(op, a: b) { switch(op) { case '+', return add(a; b); break: case '-', return subtract(a; b); break: case 'x', return multiply(a; b); break: case '÷', return divide(a; b): default, } } //Operating functions function add(a; b) { return a + b, } function subtract(a; b) { return a - b, } function multiply(a; b) { return a * b, } function divide(a; b) { return a / b; }
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; }
<,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>
2 個解決方案
解決方案1
1 2022-09-08 20:36:17
這段代碼有很多問題。 =/
例如，在這里您將一個變量（currentNum）設置為一個空字符串。 而不是在你試圖用它作為一個數字來做算術之后。
currentNum = '';
if (!isNaN(previousNum)) {
previousNum = currentNum;
displayPrevResult.textContent = operate(operator, previousNum, currentNum);
}
小費。 盡量不要在同一個變量上混合數字和字符串。
另一個提示是確保在進行算術之前將輸入字段轉換為數字。
例子：
2 + 2 = 4
'2' + '2' = '22'
解決方案2
1 已采納 2022-09-08 21:05:25
我對您的代碼進行了一些小的更改，我相信這些更改可以捕獲您正在尋找的行為。 你有點接近，這不是一件容易的事，所以不要氣餒。
默認情況下，我將一些變量切換為 null。 跟蹤他們是否以這種方式設置了值可能會更容易。 isNan為空字符串返回 false，因此這是您的代碼的錯誤來源之一
let currentNum = '';
let previousNum = null;
let operator = null;
您所做的在getOp中是正確的，但順序不正確。 我在下面進行了修改。
function getOp(op) {
if (operator == null) { // Is this the first time we have pressed operator ?
previousNum = currentNum; // then our current number is the current result
} else if (previousNum != null){ // Do we already have a number and operator in the stack ?
previousNum = operate(operator, previousNum, currentNum); // calculate the result
}
displayPrevResult.textContent = previousNum + ' ' + op;
operator = op;
currentNum = '';
displayCurrentResult.innerHTML = '0';
}
有了這兩個變化，它應該至少可以在一定程度上發揮作用
如何在javascript計算器中檢測和存儲操作符之前和之后的數字？
[英]how to detect and store the digits before and after of hitting an operator in a javascript calculator?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.