如何清除在计算器中输入的显示屏上的第一个数字，以便第二个数字不会与第一个数字连接？

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。