如何清除在计算器中输入的显示器上的第一个数字，使第二个数字不会与第一个数字相连

Question

我正在使用HTML、CSS和JavaScript创建一个计算器。我的代码中有一个问题。当用户在输入数字后单击某个运算符时，该运算符将一直高亮显示，直到用户输入第二个数字。问题是，当用户输入第二个数字时，显示器上的第一个数字不会消失。所以第二个数字与第一个数字相连。我该如何解决这个问题？当用户输入第二个数字时，我希望显示器清除前一个数字，并开始显示用户输入的任何数字。

我在伪代码中有这个想法，但不知道如何实现，因为我不知道是否可以使用JavaScript暂停元素：

单击操作员后，暂停用户的显示，但将所有内容从发动机罩下的显示中删除。当用户单击其中一个数字时，停止暂停显示并向用户显示所有内容。通过这样做，当操作员高亮显示时，用户仍然可以看到第一个数字。然而，一旦用户开始输入第二个数字，显示器将只显示第二个号码

我正在努力实现这样的目标：https://mrbuddh4.github.io/calculator/在本例中，当用户单击操作员时，显示器上的数字不会消失。当操作员点击一个数字后，前一个数字消失，显示屏开始显示当前输入的数字。

// Basic math operations
function add(a, b) {
return parseInt(a) + parseInt(b);
}
function subtract(a, b) {
return parseInt(a) - parseInt(b);
}
function multiply(a, b) {
return parseInt(a) * parseInt(b);
}
function divide(a, b) {
return parseInt(a) / parseInt(b);
}
function operate(operator, a, b) {
if (operator === "+") {
return add(a, b);
} else if (operator === "-") {
return subtract(a, b);
} else if (operator === "*") {
return multiply(a, b);
} else if (operator === "/") {
return divide(a, b);
}
}
function displayValue(e) {
operators.forEach(operator => operator.classList.remove("active"));
if (display.textContent === "0") {
display.textContent = e.target.textContent;
} else if (display.textContent !== "0") {
display.textContent += e.target.textContent;
let paddingLeftValue = parseInt(window.getComputedStyle(display)
.getPropertyValue("padding-left")) - 30;
display.style.paddingLeft = `${paddingLeftValue}px`;
}
}
function getValue() {
if (firstDisplayValue) {
secondDisplayValue = display.textContent;
console.log(`second value: ${secondDisplayValue}`);
} else {
firstDisplayValue = display.textContent;
console.log(`first value: ${firstDisplayValue}`);
}
}
function getValueAndOp(e) {
operators.forEach(operator => operator.classList.remove("active"));
e.target.classList.add("active");
getValue();
if (e.target.getAttribute("id") === "divide") {
operator = "/";
} else if (e.target.getAttribute("id") === "multiply") {
operator = "*";
} else if (e.target.getAttribute("id") === "subtract") {
operator = "-";
} else if (e.target.getAttribute("id") === "add") {
operator = "+";
}
}
function calculate() {
operators.forEach(operator => operator.classList.remove("active"));
getValue();
let solution = operate(operator, firstDisplayValue, secondDisplayValue);
display.textContent = solution;
let solutionLength = solution.toString().length;
let paddingLeftValue = 440 - (solutionLength - 1) * 30;
display.style.paddingLeft = `${paddingLeftValue}px`;
}
// Declare the main variables
let firstDisplayValue;
let secondDisplayValue;
let operator;
// Create the display variable
const display = document.querySelector(".display");
// Add event listeners to the digits
const buttons = document.querySelectorAll("#one, #two, #three, #four, #five," + 
" #six, #seven, #eight, #nine, #zero, #dot");
buttons.forEach(button => button.addEventListener("click", displayValue));
// Add event listeners to the operators
const operators = document.querySelectorAll(".operator");
operators.forEach(operator => operator.addEventListener("click", getValueAndOp));
// Add an event listener to =
const equal = document.querySelector("#equal");
equal.addEventListener("click", calculate);

* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 97vh;
}
.calc {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: 5px solid black;
border-radius: 25px;
height: 660px;
width: 500px;
padding: 5px 0 5px 0;
gap: 4px;
}
.calc>div {
width: 480px;
}
.display {
height: 130px;
font-size: 60px;
padding: 60px 0 0 440px;
}
.buttons {
display: flex;
flex-wrap: wrap;
max-height: 470px;
flex: auto;
gap: 12px;
padding: 8px 0 1px 8px;
}
.buttons>button {
font-size: 40px;
height: 75px;
width: 107px;
border-radius: 50%;
background-color: rgb(231, 230, 230);
border: none;
transition: 4ms;
}
.clear {
width: 345px !important;
background-color: rgb(62, 198, 251) !important;
color: white;
}
#zero {
width: 225px !important;
}
.clear, #zero {
border-radius: 50px !important;
}
.operator, #equal {
background-color: rgb(6, 118, 223) !important;
color: white !important;
}
button:active {
background-color: rgb(163, 163, 163);
}
.clear:active {
background-color: rgb(0, 162, 255) !important;
}
#equal:active {
background-color: rgb(0, 0, 204) !important;
}
.active {
background-color: rgb(0, 0, 204) !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calc">
<div class="display">0</div>
<div class="buttons">
<button class="clear">Clear</button>
<button class="operator" id="divide">÷</button>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button class="operator" id="multiply">×</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button class="operator" id="subtract">−</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button class="operator" id="add">+</button>
<button id="zero">0</button>
<button id="dot">.</button>
<button id="equal">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Answer 1

当用户输入第二个数字时，我希望显示器清除前一个数字，并开始显示用户输入的任何数字。

所以你只需要"记住"；点击操作员按钮，这样当点击下一个数字按钮时，您可以做出相应的反应。

单击某个操作员按钮时，将标志(clearDisplay或类似标志(设置为true
单击其中一个数字时，请检查是否首先设置了该标志，如果是，请清除显示内容，然后再将标志设置为false。