Javascript Calculator, how to save display value after equals

Question

This calculator works fine as long as you reset it after each two operand calculation. And all I need it to do, is if I hit equals, the current display value to be used as the first operand in the next calculation. I was proud of my little solution lol, until I tested it. here is my code

var backspaceBtn = document.getElementById("backspace");
var equalsBtn = document.getElementById("equals");
var decimalBtn = document.getElementById("decimal");
var clearBtn = document.getElementById("clear");
var operatorBtns = document.querySelectorAll(".operatorBtn");
var displayValEl = document.getElementById('display');
var calcNumBtns = document.getElementsByClassName("numBtn");
//variables to store operands and operators
var displayVal = "0";
var finalVal = "";
var operator = "";
var num1;
var num2;
// update display when user clicks number
var updateDisplay = (clkObj) => {
  var btnText = clkObj.target.innerText;
  if (displayVal === "0")
    displayVal = "";

  displayVal += btnText;
  displayValEl.innerText = displayVal;
}
//add event listeners to each num button,setting the click functon to update screen
for (let i = 0; i < calcNumBtns.length; i++) {
  calcNumBtns[i].addEventListener("click", updateDisplay, false);
}
// capturing the first number and operator when the operator btns are clicked
var operator1 = (clkObj) => {
  var sign = clkObj.target.innerText;
  switch (sign) {
    case "+":
      operator = "+"
      num1 = parseFloat(displayVal)
      displayVal = "0";
      displayValEl.innerText = displayVal
      break;
    case "-":
      operator = "-"
      num1 = parseFloat(displayVal)
      displayVal = "0";
      displayValEl.innerText = displayVal
      break;
    case "÷":
      operator = "÷"
      num1 = parseFloat(displayVal)
      displayVal = "0";
      displayValEl.innerText = displayVal
      break;
    case "x":
      operator = "x"
      num1 = parseFloat(displayVal)
      displayVal = "0";
      displayValEl.innerText = displayVal
      break;
    default:
      break;
  };
}
//adding event listener to the operator btns, setting click to update num1 and operator variables
for (let i = 0; i < operatorBtns.length; i++) {
  operatorBtns[i].addEventListener("click", operator1, false);
}
//adding decimal functionality, checking to see if one is present already. 
decimalBtn.onclick = () => {
  if (!displayVal.includes("."))
    displayVal += "."
  displayValEl.innerText = displayVal;
}
//capturing the second value and performing the operation
equalsBtn.onclick = () => {
  num2 = parseFloat(displayVal);
  switch (operator) {
    case '+':
      finalVal = num1 + num2;
      displayValEl.innerText = finalVal;
      break;
    case '-':
      finalVal = num1 - num2;
      displayValEl.innerText = finalVal;
      break;
    case 'x':
      finalVal = num1 * num2;
      displayValEl.innerText = finalVal;
      break;
      //nesting switches to check for division by zero.
    case '÷':
      switch (true) {
        case num1 === 0 || num2 === 0:
          alert("Cant devide by Zero")
          break;
      }
      finalVal = num1 / num2;
      displayValEl.innerText = finalVal;
      break;
    default:
      break;
  }
  num1 = displayVal;
  num2 = 0;
  operator = "";
}

clearBtn.onclick = () => {
  displayVal = "0";
  operator = "";
  num1 = 0
  num2 = 0
  displayValEl.innerText = displayVal;
}

backspaceBtn.onclick = () => {
  let lengthOfDisplay = displayVal.length;
  displayVal = displayVal.slice(0, lengthOfDisplay - 1)

  if (displayVal === "")
    displayVal = "0";

  displayValEl.innerText = displayVal;
}





  
  
  
  
  Document



  
    JavaScript Calculator
  
  
    
      0
      
        +
        -
        
        x
        ÷

        7
        8
        9
        ⇤

        4
        5
        6
        C
        

        1
        2
        3
        .

        0
        =

I've played around with it, but cant seem to get what i need to do without a total re-write.If you enter a number, then press an operator and add another number, then press equals, you get the correct answer. even decimals. But if you leave the answer on screen, and just try to press an operator and a second operand, then equals again, its very badly wrong. Ive added in the HTML

Brett Caswell · Accepted Answer

you want to persist the changes and utilize the persisted value in subsequent calculations. So, you're essentially going to refactor your equalsBtn click handler to do that.

equalsBtn.onclick = () => {  
  num2 = parseFloat(displayVal);

  switch (operator) {
    case '+':
      finalVal += num2;          
      break;
    case '-':
      finalVal -= num2;
      break;
    case 'x':
      finalVal *= num2;  
      break;
    case '÷':
      //for division by zero.
      if (num2 === 0)
      {
        alert("Cant divide by Zero");
        return;
      }
      finalVal /= num2;
      break;
    default:
      break;
  }
  displayValEl.innerText = finalVal.toString();
  num1 = num2;
  num2 = 0;
  operator = "";
};

You'll also need to ensure finalVal gets cleared in the clearBtn click handler.

clearBtn.onclick = () => {
  displayVal = "0";
  operator = "";
  num1 = 0;
  num2 = 0;
  finalVal = 0;
  displayValEl.innerText = displayVal;
};

EDIT: In Addition, there are some scenarios you should handle regarding state of this value persistence: in the scope of initializing, updateDisplay, operator click, and deleteBtn click to address other expectations.

var backspaceBtn = document.getElementById("backspace");
var equalsBtn = document.getElementById("equals");
var decimalBtn = document.getElementById("decimal");
var clearBtn = document.getElementById("clear");
var operatorBtns = document.querySelectorAll(".operatorBtn");
var displayValEl = document.getElementById('display');
var calcNumBtns = document.getElementsByClassName("numBtn");
//variables to store operands and operators
var displayVal = "0";
var operator = "";
var finalVal = 0;
var num1 = 0;
var num2 = 0;

// update display when user clicks number
var updateDisplay = (clkObj) => {
  var btnText = clkObj.target.innerText;

  var shouldResetCalc = (operator === "" && finalVal !== 0);
  
  displayVal = (displayVal === "0" || shouldResetCalc)
    ? btnText 
    : displayVal + btnText;

  if (shouldResetCalc)
    finalVal = 0;
    
  displayValEl.innerText = displayVal;
}

//add event listeners to each num button,setting the click functon to update screen
for (let i = 0, max = calcNumBtns.length; i < max; i++) {
  calcNumBtns[i].addEventListener("click", updateDisplay, false);
}

// capturing the first number and operator when the operator btns are clicked
var operator1 = (clkObj) => {
  var sign = clkObj.target.innerText;

  switch (sign) {
    case "+":
      operator = "+"
      num1 = parseFloat(displayVal);
      clearDisplay();
      break;
    case "-":
      operator = "-"
      num1 = parseFloat(displayVal);
      clearDisplay();      
      break;
    case "÷":
      operator = "÷"
      num1 = parseFloat(displayVal);
      clearDisplay();
      break;
    case "x":
      operator = "x"
      num1 = parseFloat(displayVal)
      clearDisplay();
      break;
    default:
      break;
  }
  if (finalVal === 0 && num1 !== 0)
      finalVal = num1;
};

//adding event listener to the operator btns, setting click to update num1 and operator variables
for (let i = 0; i < operatorBtns.length; i++) {
  operatorBtns[i].addEventListener("click", operator1, false);
}

//adding decimal functionality, checking to see if one is present already. 
decimalBtn.onclick = () => {
  if (!displayVal.includes("."))
    displayVal += "."

  displayValEl.innerText = displayVal;
}

//capturing the second value and performing the operation
equalsBtn.onclick = () => {  
  num2 = parseFloat(displayVal);
  
  switch (operator) {
    case '+':
      finalVal += num2;          
      break;
    case '-':
      finalVal -= num2;
      break;
    case 'x':
      finalVal *= num2;  
      break;
    case '÷':
      //for division by zero.
      if (num2 === 0)
      {
        alert("Cant divide by Zero");
        return;
      }
      finalVal /= num2;
      break;
    default:
      break;
  }
  displayVal = finalVal.toString()
  displayValEl.innerText = displayVal;
  num1 = num2;
  operator = "";
};

function clearValues() {
  num1 = 0;
  num2 = 0;
  finalVal = 0;
}

function clearDisplay() {
  displayVal = "0";
  displayValEl.innerText = displayVal;
}

clearBtn.onclick = () => {
  operator = "";
  clearValues();
  clearDisplay();
};

backspaceBtn.onclick = () => {
  let lengthOfDisplay = displayVal.length;
  displayVal = displayVal.slice(0, lengthOfDisplay - 1)

  var shouldResetCalc = (operator === "" && finalVal !== 0);
  
  if (displayVal === "")
    displayVal = "0";

  if (shouldResetCalc)
    finalVal = 0;
    
  displayValEl.innerText = displayVal;
};

button { min-width: 40px;}

.container > .container {margin-top: 1em;}

Javascript Calculator, how to save display value after equals

Answers (2)

Related Questions