Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

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

byMR
October 4, 2022
<!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/bootstrap@4.6.2/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 class="calculator">
      <div class="first-row">
        <div id="screen">
          <div class="previous"></div>
          <div class="current"></div>
        </div>
        <button id="clear-btn" class="btn">C</button>
      </div>
      <div class="other-rows">
        <button class="btn number seven">7</button>
        <button class="btn number eight">8</button>
        <button class="btn number nine">9</button>
        <button class="btn operator division">/</button>
      </div>
      <div class="other-rows">
        <button class="btn number four">4</button>
        <button class="btn number five">5</button>
        <button class="btn number six">6</button>
        <button class="btn operator multiply">x</button>
      </div>
      <div class="other-rows">
        <button class="btn number one">1</button>
        <button class="btn number two">2</button>
        <button class="btn number three">3</button>
        <button class="btn operator minus">-</button>
      </div>
      <div class="other-rows">
        <button class="btn decimal">.</button>
        <button class="btn number zero">0</button>
        <button class="btn equal">=</button>
        <button class="btn operator plus">+</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".

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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/bootstrap@4.6.2/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 class="calculator">
      <div class="first-row">
        <div id="screen">
          <div class="previous"></div>
          <div class="current"></div>
        </div>
        <button id="clear-btn" class="btn">C</button>
      </div>
      <div class="other-rows">
        <button class="btn number seven">7</button>
        <button class="btn number eight">8</button>
        <button class="btn number nine">9</button>
        <button class="btn operator division">/</button>
      </div>
      <div class="other-rows">
        <button class="btn number four">4</button>
        <button class="btn number five">5</button>
        <button class="btn number six">6</button>
        <button class="btn operator multiply">x</button>
      </div>
      <div class="other-rows">
        <button class="btn number one">1</button>
        <button class="btn number two">2</button>
        <button class="btn number three">3</button>
        <button class="btn operator minus">-</button>
      </div>
      <div class="other-rows">
        <button class="btn decimal">.</button>
        <button class="btn number zero">0</button>
        <button class="btn equal">=</button>
        <button class="btn operator plus">+</button>
      </div>
    </div>
  </body>
</html>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading