title: Remove last character from calculator display
body: <p>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.</p>
  <p>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!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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) =&gt; firstNumber + secondNumber;
  subtract = (firstNumber, secondNumber) =&gt; firstNumber - secondNumber;
  multiply = (firstNumber, secondNumber) =&gt; firstNumber * secondNumber;
  divide = (firstNumber, secondNumber) =&gt; firstNumber / secondNumber;
  
  //Take an operator and two numbers and call a math function
  
  operate = (operator, firstNumber, secondNumber) =&gt; {
    toShow = operator(firstNumber, secondNumber);
    return Math.round(toShow * 100) / 100;
  };
  
  //Update display with button clicked
  const button = document.querySelectorAll('.item');
  addEventListener('click', e =&gt; {
    calculate(e);
  });
  
  let calculate = (e) =&gt; {
    if (e.target.id === "equals" &amp;&amp; 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 &amp;&amp; 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" &amp;&amp; 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;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="sub-container"&gt;
      &lt;div class="display"&gt;
        &lt;p id="result-display"&gt;
  
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="button-grid"&gt;
        &lt;div&gt;
          &lt;button class="item" id="7" data-type="number"&gt;
  7
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="8" data-type="number"&gt;
  8
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="9" data-type="number"&gt;
  9
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="divide" data-type="nonNumber"&gt;
  */*
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="4" data-type="number"&gt;
  4
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="5" data-type="number"&gt;
  5
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="6" data-type="number"&gt;
  6
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="multiply" data-type="nonNumber"&gt;
  X
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="1" data-type="number"&gt;
  1
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="2" data-type="number"&gt;
  2
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="3" data-type="number"&gt;
  3
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="subtract" data-type="nonNumber"&gt;
  -
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="0" data-type="number"&gt;
  0
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="decimal" data-type="number"&gt;
  .
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="AC" data-type="nonNumber"&gt;
  AC
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="add" data-type="nonNumber"&gt;
  +
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="equals" data-type="nonNumber"&gt;
  =
  &lt;/button&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button class="item" id="back" data-type="nonNumber"&gt;
  &lt;
  &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
    &lt;!-- User presses back button
  preprend displayValue
  displayValue remove one
  displayArea.innerHTML remove one 
  let str = 'Mozilla';
  let smallStr = str.substr(0, str.length - 1);--&gt;</code></pre>
  </div>
  </div>
  </p>