JS计算器 - 不能做多个操作/链计算

Question

我目前正在创建一个普通的JS计算器，我遇到了一些问题。

一切都很好，只是我不会做多次计算。它不能进行多次操作，只有当你按下"="按钮。所以没有它你就做不到。我意识到我需要以某种方式存储运算结果，然后将其用于计算，但不知道如何，这听起来不难修复，但无法解决。

这是完整的代码，在这个阶段：

const display = document.querySelector(".display");
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
let firstNumber = Number("");
let secondNumber = Number("");
let operator = "";
let lastValue = "";

numbers.forEach((numBtn) => {
numBtn.addEventListener("click", function (event) {
if (operator === "") {
firstNumber += event.target.innerText;
console.log(parseInt(firstNumber));
display.textContent = parseInt(firstNumber);
} else {
secondNumber += event.target.innerText;
console.log(parseInt(event.target.innerText));
display.textContent = Number.parseInt(secondNumber);
}
});
});

operators.forEach((opBtn) => {
opBtn.addEventListener("click", function (event) {
if (event.target.innerText !== "=") {
operator = event.target.innerText;

} else {
switch (operator) {
case "+":
lastValue = Number(parseInt(firstNumber) + parseInt(secondNumber));
firstNumber = lastValue;
secondNumber = "";
operator = "";
display.textContent = lastValue;
break;

case "-":
lastValue = Number(parseInt(firstNumber) - parseInt(secondNumber));
firstNumber = lastValue;
secondNumber = "";
operator = "";
display.textContent = lastValue;
break;

case "*":
lastValue = Number(parseInt(firstNumber) * parseInt(secondNumber));
firstNumber = lastValue;
secondNumber = "";
operator = "";
display.textContent = lastValue;
break;

case "/":
lastValue = Number(parseInt(firstNumber) / parseInt(secondNumber)).toFixed(2);
firstNumber = lastValue;
secondNumber = "";
operator = "";
display.textContent = lastValue;
break;

default:
break;
}
}
});
});

///
let clearBtn = document.getElementById("AC");
clearBtn.addEventListener("click", () => {
firstNumber = "";
secondNumber = "";
operator = "";
display.textContent = "0";
});

///
let resetBtn = document.getElementById("DEL");
resetBtn.addEventListener("click", () => {
firstNumber = firstNumber.slice(0, -1);
display.textContent = display.textContent.slice(0, -1);
});

我昨天刚开始这个项目，我还没有真正取得进展，因为我对编程真的很陌生。我一个月前开始学习编程，所以请耐心等待，哈哈。

这里还有一个Codepen链接：Codepen

Answer 1

存在不必要的复杂性，请尝试此

const display = document.querySelector(".display");
const numbers = document.querySelectorAll(".number");
const operators = document.querySelectorAll(".operator");
let expression = "";
numbers.forEach((numBtn) => {
numBtn.addEventListener("click", function (event) {
expression += event.target.value;
display.textContent = expression
});
});
operators.forEach((opBtn) => {
opBtn.addEventListener("click", function (event) {
operator = event.target.innerText;
switch (operator) {
case "+":
case "-":
case "*":
case "/":
expression += operator;
display.textContent = expression;
break;
case "=":
display.textContent = eval(expression);
break;
case "AC":
expression = ""
display.textContent = "0"
break;
case "DEL":
display.textContent = display.textContent.slice(0, -1);
break;
}
});
});

body {
background: linear-gradient(to right, rgb(173, 143, 173), rgb(32, 86, 129));
font-family: Arial, Helvetica, sans-serif;
}
.container {
background: rgba(255, 255, 255, 0.363);
width: 320px; 
height: 500px;
border-radius: 1.3em;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94, 104, 121, 0.288);
margin: 0 auto;
padding: 32px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: rgba(4, 6, 7, 0.582) 0px 20px 30px -10px;

}   

.container .display {
width: 100%;
height: 140px;
width: 320px;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
background-color: white;
border-radius: 0.3em;


}
.container .display {

font-size: 37pt;
text-align: right;
font-weight: bold;
}

.buttons {
display: grid;
grid-template-columns:  70px 70px 70px 70px;
grid-gap: 0.8em;
border-radius: 0.35em;

}
.container .buttons .operator, .container .buttons .number  {
width: 70px;
height: 52px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 20px;
top: -20px;
font-weighT: bold;
}

.container .buttons #equals {
width: 235px;
}

.container .buttons .operator:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}

.container .buttons .number:before {
content: '';
background: linear-gradient(250deg, #4400ff, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 30s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container .buttons .operator:active {
color: #000
}
.container .buttons .operator:active:after {
background: transparent;
}
.container .buttons .operator:hover:before {
opacity: 1;
}
.container .buttons .operator:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}

.container .buttons .number:active {
color: #000
}
.container .buttons .number:active:after {
background: transparent;
}
.container .buttons .number:hover:before {
opacity: 1;
}
.container .buttons .number:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}

<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">
<title>Calculator</title>
</head>
<body> 
<div class="container">   
<div class="display">0</div>
<div class="buttons">
<button class="number" value=0>0</button>
<button class="number" value=1>1</button>
<button class="number" value=2>2</button>
<button class="number" value=3>3</button>
<button class="number" value=4>4</button>
<button class="number" value=5>5</button>
<button class="number" value=6>6</button>
<button class="number" value=7>7</button>
<button class="number" value=8>8</button>
<button class="number" value=9>9</button>
<button class="operator" id="+" value="+">+</button>
<button class="operator" id="=" value="=">=</button>
<button class="operator" id="-" value="-">-</button>
<button class="operator" id="*" value="*">*</button>
<button class="operator" id="/" value="/">/</button>
<button class="operator" id="AC" value="AC">AC</button>
<button class="operator" id="DEL" value="DEL">DEL</button>
</div>
</div>

</body>
<script src="script.js"></script>
</html>