Why does my calculator stop working after "=" input

Why does my calculator stop working after "=" input
0.0 0

#1

I’m working through the “Build a JavaScript Calculator” and I cannot figure out what is going wrong with my calculator. It accepts inputs just fine until you click the “=” button. At that point it displays the answer, but won’t register any new inputs. Any help is appreciated, I’m pulling my hair out.

https://codepen.io/rowens794/pen/oqpxgp


#2

I think I may have found the problem—in your code where you process when = is pressed, the last line is:

inputArray = answer;

After this point, inputArray isn’t an array anymore—so even though the answer gets displayed properly (as it should because of type coercion), you won’t be able to carry out any more calculations because inputArray is no longer an array. I haven’t looked at the rest of the code too closely, but this solves the issue so I suspect that that’s all:

inputArray = [answer];

Good luck! :smile:


#3

On your JS line 42, can’t you just do this?

      // inputArray = answer;
      inputArray = [];
      windowText = "";

#4
inputArray = [answer];

There’s a bug if after you press =, and got the answer and your next keypress is a number.

2
*
5
= // displays "10"
6 // displays “56”
*
3
= // displays “318”


#5

I only tested operations and didn’t actually try starting a new calculation. :sweat:

The bug you mentioned seems to come from multiple related issues, the first one being windowText not getting updated after pressing =:

    else if(input == "="){
      answer = eval(inputArray.join(""));
      
      if(!isNaN(answer)){
        $(".window").html(answer);
        // --------
        // windowText should be updated here because it's actually
        // in another function for calculations
        windowText = answer;
        // --------
      }
      else{
        $(".window").html("invalid input");
        // --------
        // inputArray should probably be set to empty at this point, too, error
        // depending on the intended behaviour on
        inputArray = [];
        // --------
      }

      // --------
      // The line below should be moved to inside the if block above if
      // the changes suggested above sound reasonable
      inputArray = [answer];
      // --------
    }

Then there is another issue with how new number inputs are handled—it’s simply concatenated with windowText, which shouldn’t be the case after the = button is pressed (no comments made because I would be coding the calculator otherwise):

    if (!isNaN(input) && !isNaN(windowText)){  
      windowText += input;
      $(".window").html(windowText);
    }

In summary:

2
*
5
=
// $(".window").html(answer); but windowText doesn't get a new assignment
// and is still the previous number, which is "5"
6
// Displays “56” because of the second part of the code mentioned above
// windowText is "5", input is "6", so windowText becomes "56"
*
3
= // displays “318”

#6

This seems to be the easiest/laziest fix :slight_smile: and functions the same as a Calculator App.

// inputArray = answer;
  inputArray = [];
  windowText = "";

#7

Wow. Thank you so much! Exactly what I needed.

Also, I have to say - this was my first post and I am blown away by the response I got from the community here. Thank you all for pointing out bugs I didn’t even know I had yet.


#8

It should be noted that @owel’s solution (I was a bit distracted when I responded and only responded to what was addressed to me .___. sorry!)—which would also work! Whichever solution you end up using, there will need to be additional logic implemented if you want to carry over the result (whatever pressing = returns); otherwise @owel’s solution is definitely simpler!

Welcome to the forum! :smile: