/* 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>
I默认情况下切换了一些变量为无效。跟踪他们是否以这种方式设置值可能会更容易。
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';
}
此代码有很多错误。 =/
实例，在这里您将变量（CurrentNum）设置为一个空字符串。并且在您试图将其用作算术的数字之后。
currentNum = '';
if (!isNaN(previousNum)) {
previousNum = currentNum;
displayPrevResult.textContent = operate(operator, previousNum, currentNum);
}
tip！
尽量不要在同一变量上混合数字和字符串。
其他提示是要确保在执行算术之前将输入字段转换为数字。
示例：2 + 2 =4
'2' +'2'='22'
听起来好像您在商店的正确轨道上，并动态更新结果，您可能需要在应用操作员之前调整如何处理以前的NUM和
currentNumconsole.log()