Remove last character from calculator display

Question

I've added a back button to my calculator with the idea that when someone presses it they can undo if they clicked the wrong number.

I've tried to solve using substr within an if statement in my calculate function but nothing seems to be happening it's as if it's not recording when the user clicks the button. To be honest I'm not sure this is the correct approach!

//Create variable to hold display value, create variable of display area and populate.
let toShow = 0;
let displayValue = 0;
let displayArea = document.getElementById('result-display');
let dataType = document.querySelectorAll('[data-type]');
let operator = "";
let firstNumber = 0;
let secondNumber = 0;
let operatorPressed = false;
let secondNumberCounter = false;
let firstNumberCounter = false;
let buttonNumber = 0;
let decimalCounter = 0;
displayArea.innerHTML = 0;
/* displayArea.innerHTML += displayValue; */

//Basic math functions
add = (firstNumber, secondNumber) => firstNumber + secondNumber;
subtract = (firstNumber, secondNumber) => firstNumber - secondNumber;
multiply = (firstNumber, secondNumber) => firstNumber * secondNumber;
divide = (firstNumber, secondNumber) => firstNumber / secondNumber;

//Take an operator and two numbers and call a math function

operate = (operator, firstNumber, secondNumber) => {
  toShow = operator(firstNumber, secondNumber);
  return Math.round(toShow * 100) / 100;
};

//Update display with button clicked
const button = document.querySelectorAll('.item');
addEventListener('click', e => {
  calculate(e);
});

let calculate = (e) => {
  if (e.target.id === "equals" && secondNumber === 0) {
    displayArea.innerHTML = "OH HELL NO!";
  } else if (e.target.id === "equals") {
    decimalCounter = 0;
    switch (operator) {
      case "add":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(add, firstNumber, secondNumber);
      case "multiply":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(multiply, firstNumber, secondNumber);
      case "divide":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(divide, firstNumber, secondNumber);
      case "subtract":
        secondNumberCounter = false;
        return firstNumber = displayArea.innerHTML = operate(subtract, firstNumber, secondNumber);
    }
  }
  if (operatorPressed === true && e.target.dataset.type === "number") {
    if (secondNumberCounter === false) {
      displayArea.innerHTML = null;
    }
    if (decimalCounter === 0) {
      let secondButtonNumber = e.target.innerText;
      displayValue = secondButtonNumber;
      displayArea.innerHTML += displayValue;
      secondNumber = Number(displayArea.innerHTML);
      secondNumberCounter = true;
    }
  } else if (e.target.dataset.type === "nonNumber") {
    decimalCounter = 0;
    operator = e.target.id;
    firstNumber = Number(displayArea.innerText);
    operatorPressed = true;
  } else {
    if (e.target.id === "decimal" && decimalCounter === 0) {
      ++decimalCounter;
      buttonNumber = e.target.innerText;
      displayValue = buttonNumber;
      displayArea.innerHTML += displayValue;
      console.log(buttonNumber);
    } else {
      buttonNumber = Number(e.target.innerText);
      displayValue = buttonNumber;
      displayArea.innerHTML += displayValue;
      displayArea.innerHTML = Number(displayArea.innerHTML);
    }
  }
  if (e.target.id === "AC") {
    secondNumberCounter = false;
    operatorPressed = false;
    firstNumber = 0;
    secondNumber = 0;
    buttonNumber = 0;
    decimalCounter = 0;
    displayArea.innerHTML = 0;
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  width: 275px;
  height: 450px;
  border: 1px solid black;
}

.sub-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 95%;
  width: 800%;
}

.display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid white;
  width: 80%;
  height: 10%;
  margin: 5% 0 5% 0;
  color: white;
}

#result-display {
  margin-right: 8%;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 80%;
}

.item {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: black;
}

button {
  width: 100%;
  height: 100%;
}

footer {
  width: 100%;
  background-color: gray;
}

Make the calculator work! You’ll need to store the first number that is input into the calculator when a user presses an operator,
and also save which operation has been chosen and then operate() on them when the user presses the “=” key.

<div class="container">
  <div class="sub-container">
    <div class="display">
      <p id="result-display">

      </p>
    </div>
    <div class="button-grid">
      <div>
        <button class="item" id="7" data-type="number">
7
</button>
      </div>
      <div>
        <button class="item" id="8" data-type="number">
8
</button>
      </div>
      <div>
        <button class="item" id="9" data-type="number">
9
</button>
      </div>
      <div>
        <button class="item" id="divide" data-type="nonNumber">
*/*
</button>
      </div>
      <div>
        <button class="item" id="4" data-type="number">
4
</button>
      </div>
      <div>
        <button class="item" id="5" data-type="number">
5
</button>
      </div>
      <div>
        <button class="item" id="6" data-type="number">
6
</button>
      </div>
      <div>
        <button class="item" id="multiply" data-type="nonNumber">
X
</button>
      </div>
      <div>
        <button class="item" id="1" data-type="number">
1
</button>
      </div>
      <div>
        <button class="item" id="2" data-type="number">
2
</button>
      </div>
      <div>
        <button class="item" id="3" data-type="number">
3
</button>
      </div>
      <div>
        <button class="item" id="subtract" data-type="nonNumber">
-
</button>
      </div>
      <div>
        <button class="item" id="0" data-type="number">
0
</button>
      </div>
      <div>
        <button class="item" id="decimal" data-type="number">
.
</button>
      </div>
      <div>
        <button class="item" id="AC" data-type="nonNumber">
AC
</button>
      </div>
      <div>
        <button class="item" id="add" data-type="nonNumber">
+
</button>
      </div>
      <div>
        <button class="item" id="equals" data-type="nonNumber">
=
</button>
      </div>
      <div>
        <button class="item" id="back" data-type="nonNumber">
<
</button>
      </div>
    </div>
  </div>
</div>
<div>

  <!-- User presses back button
preprend displayValue
displayValue remove one
displayArea.innerHTML remove one 
let str = 'Mozilla';
let smallStr = str.substr(0, str.length - 1);-->

You haven't linked up your html and js yet. Now nothing happens when you clicked the button, because you haven't put it in your code. — Casper Kuethe, Apr 19 '22 at 20:30
easier i think to just divide by the base, in this case 10, and update the display rather than mess with strings — fnostro, Apr 19 '22 at 20:55

score 0 · Answer 1 · answered Apr 19 '22 at 20:48

0

You can use either The Memento Pattern or The Command Pattern explained here:

How to make a undo/redo function

answered Apr 19 '22 at 20:48

Cengiz

162
9

score 0 · Accepted Answer · answered Apr 21 '22 at 08:07

I ended up solving this using substring. Basically I look for the length of the string in my calculators display then remove the last character.

Code used in an IF Statement:

if (e.target.id === "back") {
displayArea.innerHTML = displayArea.innerHTML.substring(0, displayArea.innerHTML.length - 1);
}

Remove last character from calculator display

2 Answers2