Trouble making calculator using switch statements

JavaScript
1

I’m kind of stuck and don’t understand why my variables are not being updated in local scope. I’m just trying to make it work using the “+” operator for now, using JS and my code is like this:

const display = document.getElementById("display");
const buttons = Array.from(document.getElementsByClassName("buttons"));

buttons.map((button) => {
  button.addEventListener("click", (e) => {
    let num1 = 0;
    let num2 = 0;
    let total = num1 + num2;
    switch (e.target.innerText) {
      case "+":
        num1 = parseInt(display.innerText);
        display.innerText = "";
        break;
      case "=":
        num2 = parseInt(display.innerText);
        display.innerText = total;
        console.log(total)
        break;
      case "C":
        display.innerText = "";
        break;
      case "CA":
        display.innerText = "";
        num1 = 0;
        num2 = 0
        break;
      default:
        display.innerText += e.target.innerText;
        break;
    }
  });
});

I get 0 printed to console, and I cant figure out why. I know its a global and local state issue, or I’m assuming it is. I just cant seem to wrap my head around it and make it work. Any help would be appreciated.

2

It’s a little difficult to understand what you are asking. Are you asking why this:

console.log(total)

outputs “0” when you do something like 2 + 2 =?

When you have something like:

let total = num1 + num2;

It stores in total the sum of those two values at that point in time. If you change the value of num1 or num2 later, total doesn’t update.

3

Thats what I dont understand.

I declare num1 with a value of 0 in the scope of the function.

In the switch statement I update the value of num1 when an operator is clicked, in this “case” its the “+” operator. So num1 becomes the value of the integers that I get from from the display’s innerText. I have confirmed this works. The value of num1 doesn’t get redefined outside the scope of that case. I cant re-use the num1 in a different “case” because its new redefined value never gets returned. Num1 stays 0 outside the case block. I dont want it too lol.

4

I don’t really understand what you are trying to do but the variables inside the handler function get redeclared every time the handler is called.

5

I want to assign values to num1 and num2 based on user input so that I can use those values to perform mathematical operations on. The values do not get re-assigned outside of the “case” block. Im iterating over buttons on a calculator, checking to see what kind of button it is, then using the value of that buttons innerText to determine if its a number or an operator.

6

What I’m saying is.

Unless both variables get assigned values when the handler runs and the values are used (by returning them out, or passing them to a different function, or assigned to a variable in an outer scope), the values will be lost when the handler is called again.

7

I think I understand what you’re saying. I tried re-writing it using if/else statements and I get the same issue.

I’m just not understanding how to capture the values of the user input and perform the necessary math on those values. Like after the user hits an operator I want to save the input, clear the input area, and allow the user to input the second num. Then when the user clicks the ‘=’ button I want to save the second input in a second num, and perform the math using the operator from before.

8

It has nothing to do with the switch, it has to do with the function.

If you want to use variables declared inside a function, outside the function, you have to return, pass, or assign the value to the outside. Or you have to use a closure, but I wouldn’t suggest that unless it makes sense.

1 Like
9

I finally got what you were saying lol. Once I moved the variables outside the function, and had the function return the values, my calculator works. Sometimes you just need to go do something else for a minute and come back to it. Thanks for your help.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.