How to remove remove a value in calculator screen with backspace function-CodePudding

<!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" />
    <title>Calculator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Calculator</h1>
    <div >
      <div >
        <div id="screen">
          <div ></div>
          <div ></div>
        </div>
        <button id="clear-btn" >C</button>
      </div>
      <div >
        <button >7</button>
        <button >8</button>
        <button >9</button>
        <button >/</button>
      </div>
      <div >
        <button >4</button>
        <button >5</button>
        <button >6</button>
        <button >x</button>
      </div>
      <div >
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >-</button>
      </div>
      <div >
        <button >.</button>
        <button >0</button>
        <button >=</button>
        <button > </button>
      </div>
    </div>
  </body>
</html>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.btn {
  height: 75px;
  width: 75px;
  margin: 15px;
  font-size: 40px;
}

.number {
  border: 1px solid blue;
  border-radius: 10px;
}

.number:hover {
  background-color: lightblue;
}

.operator {
  border: 1px solid red;
  border-radius: 10px;
}

.operator:hover {
  background-color: lightcoral;
}

.decimal {
  border: 1px solid peru;
  border-radius: 10px;
}

.decimal:hover {
  background-color: peachpuff;
}

.equal {
  border: 1px solid green;
  border-radius: 10px;
}

.equal:hover {
  background-color: lightgreen;
}

#clear-btn {
  border: 1px solid violet;
  border-radius: 10px;
}

#clear-btn:hover {
  background-color: lavender;
}

.first-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 300px;
  border: 3px solid rosybrown;
  height: 75px;
  margin: 15px;
}

.previous {
  font-size: 20px;
}

.current {
  font-size: 30px;
}

h1 {
  font-family: cursive;
  font-size: 80px;
  color: salmon;
}

body {
  background-color: lightyellow;
}

.calculator {
  border: 1px solid black;
}

let operator = "";
let previousValue = "";
let currentValue = "";

document.addEventListener("DOMContentLoaded", () => {
  let decimal = document.querySelector(".decimal");
  let equal = document.querySelector(".equal");
  let clear = document.querySelector("#clear-btn");

  let operators = document.querySelectorAll(".operator");
  let numbers = document.querySelectorAll(".number");

  let previousScreen = document.querySelector(".previous");
  let currentScreen = document.querySelector(".current");

  numbers.forEach((number) => {
    number.addEventListener("click", (e) => {
      handleNumber(e.target.textContent);
      currentScreen.textContent = currentValue;
    });
  });

  operators.forEach((op) =>
    op.addEventListener("click", function (e) {
      handleOperator(e.target.textContent);
      previousScreen.textContent = previousValue   " "   operator;
      currentScreen.textContent = currentValue;
    })
  );

  clear.addEventListener("click", () => {
    previousValue = "";
    currentValue = "";
    operator = "";
    previousScreen.textContent = currentValue;
    currentScreen.textContent = currentValue;
  });

  equal.addEventListener("click", () => {
    if (currentValue != "" && previousValue != "") {
      calculate();
      previousScreen.textContent = "";
      if (previousValue.length <= 5) {
        currentScreen.textContent = previousValue;
      } else {
        currentScreen.textContent = previousValue.slice(0, 5)   "...";
      }
    }
  });

  decimal.addEventListener("click", () => {
    addDecimal();
  });
});

function handleNumber(num) {
  if (currentValue.length <= 5) {
    currentValue  = num;
  }
}

function handleOperator(op) {
  operator = op;
  previousValue = currentValue;
  currentValue = "";
}

function calculate() {
  previousValue = Number(previousValue);
  currentValue = Number(currentValue);

  if (operator === " ") {
    previousValue  = currentValue;
  } else if (operator === "-") {
    previousValue -= currentValue;
  } else if (operator === "x") {
    previousValue *= currentValue;
  } else if (operator === "/") {
    previousValue /= currentValue;
  }

  previousValue = roundNum(previousValue);
  previousValue = previousValue.toString();
  currentValue = previousValue.toString();
}

function roundNum(num) {
  return Math.round(num * 1000) / 1000;
}

function addDecimal() {
  if (!currentValue.includes(".")) {
    currentValue  = ".";
  }
}

window.onkeydown = function (e) {
  e.preventDefault();
  let x = e.key;
  let choice;
  let currentScreen = document.querySelector(".current");
  switch (x) {
    case "1":
      choice = document.querySelector(".one");
      choice.click();
      break;
    case "2":
      choice = document.querySelector(".two");
      choice.click();
      break;
    case "3":
      choice = document.querySelector(".three");
      choice.click();
      break;
    case "4":
      choice = document.querySelector(".four");
      choice.click();
      break;
    case "5":
      choice = document.querySelector(".five");
      choice.click();
      break;
    case "6":
      choice = document.querySelector(".six");
      choice.click();
      break;
    case "7":
      choice = document.querySelector(".seven");
      choice.click();
      break;
    case "8":
      choice = document.querySelector(".eight");
      choice.click();
      break;
    case "9":
      choice = document.querySelector(".nine");
      choice.click();
      break;
    case "0":
      choice = document.querySelector(".zero");
      choice.click();
      break;
    case "/":
      choice = document.querySelector(".division");
      choice.click();
      break;
    case "*":
      choice = document.querySelector(".multiply");
      choice.click();
      break;
    case "-":
      choice = document.querySelector(".minus");
      choice.click();
      break;
    case " ":
      choice = document.querySelector(".plus");
      choice.click();
      break;
    case ".":
      choice = document.querySelector(".decimal");
      choice.click();
      break;
    case "Enter":
      choice = document.querySelector(".equal");
      choice.click();
      break;
    case "Backspace":
      currentScreen.textContent = currentScreen.textContent
        .toString()
        .slice(0, -1);
      break;
  }
};

The current screen in my calculator function responds to the keyboard input of backspace and removes the last value but when I input another value it shows up again. It seems to only temporarily remove it. Is this issue due to it being stored in memory ? I tried to use slicing but it does seem to work in case "Backspace".

CodePudding user response：

In your switch case "Backspace", you only edit the text value on the HTML, but don't update the currentValue. When you press the other actions, it uses the currentValue, so your previous change gets overwritten.

case "Backspace":
  currentValue = currentScreen.textContent
    .toString()
    .slice(0, -1);
  currentScreen.textContent = currentValue;
  break;

I added a working solution as well, so you can test it out.

let operator = "";
let previousValue = "";
let currentValue = "";

document.addEventListener("DOMContentLoaded", () => {
  let decimal = document.querySelector(".decimal");
  let equal = document.querySelector(".equal");
  let clear = document.querySelector("#clear-btn");

  let operators = document.querySelectorAll(".operator");
  let numbers = document.querySelectorAll(".number");

  let previousScreen = document.querySelector(".previous");
  let currentScreen = document.querySelector(".current");

  numbers.forEach((number) => {
    number.addEventListener("click", (e) => {
      handleNumber(e.target.textContent);
      currentScreen.textContent = currentValue;
    });
  });

  operators.forEach((op) =>
    op.addEventListener("click", function (e) {
      handleOperator(e.target.textContent);
      previousScreen.textContent = previousValue   " "   operator;
      currentScreen.textContent = currentValue;
    })
  );

  clear.addEventListener("click", () => {
    previousValue = "";
    currentValue = "";
    operator = "";
    previousScreen.textContent = currentValue;
    currentScreen.textContent = currentValue;
  });

  equal.addEventListener("click", () => {
    if (currentValue != "" && previousValue != "") {
      calculate();
      previousScreen.textContent = "";
      if (previousValue.length <= 5) {
        currentScreen.textContent = previousValue;
      } else {
        currentScreen.textContent = previousValue.slice(0, 5)   "...";
      }
    }
  });

  decimal.addEventListener("click", () => {
    addDecimal();
  });
});

function handleNumber(num) {
  if (currentValue.length <= 5) {
    currentValue  = num;
  }
}

function handleOperator(op) {
  operator = op;
  previousValue = currentValue;
  currentValue = "";
}

function calculate() {
  previousValue = Number(previousValue);
  currentValue = Number(currentValue);

  if (operator === " ") {
    previousValue  = currentValue;
  } else if (operator === "-") {
    previousValue -= currentValue;
  } else if (operator === "x") {
    previousValue *= currentValue;
  } else if (operator === "/") {
    previousValue /= currentValue;
  }

  previousValue = roundNum(previousValue);
  previousValue = previousValue.toString();
  currentValue = previousValue.toString();
}

function roundNum(num) {
  return Math.round(num * 1000) / 1000;
}

function addDecimal() {
  if (!currentValue.includes(".")) {
    currentValue  = ".";
  }
}

window.onkeydown = function (e) {
  e.preventDefault();
  let x = e.key;
  let choice;
  let currentScreen = document.querySelector(".current");
  switch (x) {
    case "1":
      choice = document.querySelector(".one");
      choice.click();
      break;
    case "2":
      choice = document.querySelector(".two");
      choice.click();
      break;
    case "3":
      choice = document.querySelector(".three");
      choice.click();
      break;
    case "4":
      choice = document.querySelector(".four");
      choice.click();
      break;
    case "5":
      choice = document.querySelector(".five");
      choice.click();
      break;
    case "6":
      choice = document.querySelector(".six");
      choice.click();
      break;
    case "7":
      choice = document.querySelector(".seven");
      choice.click();
      break;
    case "8":
      choice = document.querySelector(".eight");
      choice.click();
      break;
    case "9":
      choice = document.querySelector(".nine");
      choice.click();
      break;
    case "0":
      choice = document.querySelector(".zero");
      choice.click();
      break;
    case "/":
      choice = document.querySelector(".division");
      choice.click();
      break;
    case "*":
      choice = document.querySelector(".multiply");
      choice.click();
      break;
    case "-":
      choice = document.querySelector(".minus");
      choice.click();
      break;
    case " ":
      choice = document.querySelector(".plus");
      choice.click();
      break;
    case ".":
      choice = document.querySelector(".decimal");
      choice.click();
      break;
    case "Enter":
      choice = document.querySelector(".equal");
      choice.click();
      break;
    case "Backspace":
      currentValue = currentScreen.textContent
        .toString()
        .slice(0, -1);
      currentScreen.textContent = currentValue;
      break;
  }
};

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.btn {
  height: 75px;
  width: 75px;
  margin: 15px;
  font-size: 40px;
}

.number {
  border: 1px solid blue;
  border-radius: 10px;
}

.number:hover {
  background-color: lightblue;
}

.operator {
  border: 1px solid red;
  border-radius: 10px;
}

.operator:hover {
  background-color: lightcoral;
}

.decimal {
  border: 1px solid peru;
  border-radius: 10px;
}

.decimal:hover {
  background-color: peachpuff;
}

.equal {
  border: 1px solid green;
  border-radius: 10px;
}

.equal:hover {
  background-color: lightgreen;
}

#clear-btn {
  border: 1px solid violet;
  border-radius: 10px;
}

#clear-btn:hover {
  background-color: lavender;
}

.first-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 300px;
  border: 3px solid rosybrown;
  height: 75px;
  margin: 15px;
}

.previous {
  font-size: 20px;
}

.current {
  font-size: 30px;
}

h1 {
  font-family: cursive;
  font-size: 80px;
  color: salmon;
}

body {
  background-color: lightyellow;
}

.calculator {
  border: 1px solid black;
}

<!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" />
    <title>Calculator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Calculator</h1>
    <div >
      <div >
        <div id="screen">
          <div ></div>
          <div ></div>
        </div>
        <button id="clear-btn" >C</button>
      </div>
      <div >
        <button >7</button>
        <button >8</button>
        <button >9</button>
        <button >/</button>
      </div>
      <div >
        <button >4</button>
        <button >5</button>
        <button >6</button>
        <button >x</button>
      </div>
      <div >
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >-</button>
      </div>
      <div >
        <button >.</button>
        <button >0</button>
        <button >=</button>
        <button > </button>
      </div>
    </div>
  </body>
</html>