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

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

When the user enters the second number, I want the display to clear the previous number and start displaying whatever the user is entering.

所以您只需要“记住”操作员按钮上发生了点击，这样您就可以在下一个数字按钮被点击时做出相应的反应。

当操作员按钮之一被点击时，将标志（clearDisplay 或类似）设置为真。
当其中一个数字被点击时，首先检查是否设置了该标志，如果是，请清除显示，然后再次将标志设置为 false。

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

How can I clear the first number on the display entered in a calculator so that the second number does not get concatenated to the first one?

html

javascript

css

frontend

calculator