Need help with Javascript calculator

JavaScript
1

So I have one last thing I need the javascript calculator to do before I am finished. I want the calculator to run it’s equal function when an operator is pressed after having already pressed an operator and a number. Example , if I press “6” and then “+” and then “6” and then “+” again, I want the equals function to automatically activate. If I could get to that point, I would be able to delegate the other functions that would need to pass. I have code I have already written that aimed to accomplish this task but I am getting no such response from it

Here is my codepen https://codepen.io/DannyHz/pen/zjamKK/?editors=0011

Here is my javascript in case you just wanted to read that

$(document).ready(function(){
  var x;
  var memory = "";
  var operator = "";
  var equated = false; 
  function total(){
      $("span").html(eval( (memory + operator + x)).toFixed(2)); 
      operator = "";
      keysPressed = "";
      x = "";
      equated = false; 
  }
  function clear () {
    $("#display").text("0");
    memory = "";
    x = "";
  }
  
  function clearKeys(){
    keysPressed = "";
  }
  
  
  
  $("button").click(function(){
        var display = $("#display").text();
        var value = $(this).val();
        if($(this).val()=="clear"){
          clear();
        }
        else if ($("#display").text()=="0" || $("#display").text()=="-" || $("#display").text()=="+" || $("#display").text()=="/" ||
          $("#display").text()=="*"){
          x = $(this).val();
          $("#display").text(x);

        }
        else if($(this).val()=="equals"){
          total();
        }
        else if ($(this).attr('id')==="backOne" ){
          var y = $("#display").text();
          x = y.substring(0,y.length-1);
          $("#display").text(x);
        }

        else if(display.indexOf(".")>-1 && value == "."){
            x = x;
        }
        else if(value == "+" || value == "-" || value == "/" || value== "*"){
            memory = x;
            operator = value;
            equated = true;
            $("#display").text(value);
        }

        else if(equated == true  && value == "+" || value == "-" || value == "/" || value== "*") {
            total();
            console.log('this');
        }

       else {
             x = $("#display").text() +  $(this).val();
            $("#display").text(x);

       }


      });

    });

Thanks in advance!

2

Hi!

To make what you say this way is a little tricky because all the buttons are handled by the same handler! If you use different handlers the problem is separated in chunks of code that are not related (I mean, no if-else’s concatenated).

You may create a variable that holds the step: step == 1 when you input the first number, == 2 when already is a first number and the user input is a operator, and == 3 when user input is the second number and we have the first number and the operator. Next button pressed must be an operator or equals; if it is an operator, make the operation (first_number operator second_number), save the result as first number, change the operator for the new operator just pressed, and set step = 2 (because we have first number and operator).

I hope I make myself clear. I’m going to write some code to clarify this…

1 Like
3

I am rewriting it right now with different event handlers. If anyone is just stopping by, you can cut and paste the javascript and put it in my codepen to gauge it’s original functionality . I know it is gonna be a little nonfunctional for the time being.

1 Like
4

Thanks Raptortilla! That solved my issue :slight_smile:

5

I don’t quite catch what you mean with if(step == 2 && total()).

I was just writing when you posted… This is a possible sketch of what I mean:

// I assume a structure like first_number operator second_number, where we get first_number
// in the first step, operator in the second step, and second_number in the third step...
$(document).ready(function(){
      var result;
      var step = 1;
      var first_number;
      var second_number;
      var operator;

      // If a number is pressed...
      $(".numbers").click(function(){
                
        if (step == 1)
        {
          // here we get the first_number...
        }

        if (step == 3)
        {
          // here we get the second_number...
        }        
      });

      // If an operator is pressed...
      $(".operators").click(function(){
        if (step == 2)
        {
          // here we get the operator...
        }

        // in step == 4 we already have all what is needed to calculate a result... So we see if the user's
        // input is equals or another operator
        if (step == 4)
        {
          if ($(this).val() == "equals")
          {
            // equals has been pressed: call function that calculates the result and set the variables to initial state.
          }
          else 
          {
            // other operator has been pressed: code that calculates the first_number operator second_number,
            // save the result in first_number and set step to 3 (to catch the new second_number)
          }
        }
      });
      
    });

Note that I selected by class, wich I added to the buttons… This way we differenciate the buttons in two big groups…
There are missing points, like when the user wants to input a number like 10; in this case, zero will be lost because we don’t catch it anywhere.
Also, in every if statement you must increment step.

1 Like
6

Thanks Raptortilla! That solved my issue :slight_smile:

1 Like