CODEWITHSUNDEEP
javascripthtmlcss
Jason
Jason

Reputation: 5

function for calculator not returning results

I'm trying to find out why my math function isn't returning the results to the screen. I think there maybe a problem with my switch statements but it looks fine to me. I converted the strings to numbers than I'm passing to the switch function to do the math for me. I'm only testing it with the numbers 1 and 2, and only the + and = operator are set. It works with storing the strings and displaying them but I'm not able to get my function to do all the calculation to work properly.

What's going wrong?

var prevNum = "";
var currNum = "";
var setNumber;
var resultNum;
var operator;


function display(x) {

  var screen = document.getElementById("display");

  if (resultNum) { //reset result Numbers
    resultNum = "";
  } else {
    currNum += x;
    screen.value = currNum;
  }

}


function math() {

  //converts string to number
  prevNum = parseFloat(prevNum);
  currNum = parseFloat(currNum);

  switch (operator) {
    case "+":
      resultNum = prevNum + currNum;
      break;

    case "-":
      resultNum = prevNum + currNum;
      break;

    case "*":
      resultNum = prevNum + currNum;
      break;

    default:
      resultNum = currNum;

  }

  screen.value = resultNum;

}


//store number
function storeNum(x) {
  prevNum = currNum;
  operator = x;
  currNum = "";
}
<div class="container">
  <div id="screen">
    <input type="text" id="display" disabled>
    <p id="result"></p>
  </div>
  <div id="keypad">
    <input type="button" value="C">
    <input type="button" value="CE" onclick="clear()">
    <input type="button" value="^">
    <input type="button" value="+" onclick="storeNum('+')">
    <br>
    <input type="button" value="9">
    <input type="button" value="8">
    <input type="button" value="7">
    <input type="button" value="-">
    <br>
    <input type="button" value="6">
    <input type="button" value="5">
    <input type="button" value="4">
    <input type="button" value="*">
    <br>
    <input type="button" value="3">
    <input type="button" value="2" onclick="display('2')">
    <input type="button" value="1" onclick="display('1')">
    <input type="button" value="/">
    <br>
    <input type="button" value="0">
    <input type="button" value=".">
    <input type="button" value="=" onclick="math()">
  </div>
</div>

Upvotes: 0

Views: 101

Answers (1)

gtato
gtato

Reputation: 420

First of all, it is a good investment if you learn how to debug your code on a browser using the developer tools. You might want to follow some video tutorials online.

The reason why your code is not working is because the variable screen is declared within the method display and you are trying to access it in the method math. To do that you have to declare screen outside any method (with a global scope) That said, there are so many things you can improve on your calculator, for example:

  1. You should not change the parameter of the method for each number as you are doing (display('1'), display('2')...), try to retrieve the number from the value of the button:

    <input type="button" value="1" onclick="display()">
function display(e){
    e = e || window.event;
    e = e.target || e.srcElement   
    screen.value += e.value; //e.value contains the value of the button      
}

    You can do the same for the operator:

    <input type="button" value="+" onclick="storeNum()">
function storeNum(op) {
    op = op || window.event;
    op = op.target || op.srcElement
    operator = op.value;
}

  2. Try to avoid switch statements when possible. For example you can use the eval() method which evaluates a string, such as eval("1+2")=3. So your math() function can simply become:

    function math(){
    operation = prevNum + operator + currNum
    resultNum = eval(operation)
}

  3. Finally, maybe you would like to consider some better functional requirements for your calculator. Right now it can perform only one operation at a time. Maybe you would like to evaluate more complex expressions.

Do not copy paste the code from above because that is just to illustrate my points. You can find a working version here: https://jsfiddle.net/gtato/6mtej33g/

Upvotes: 1

Related Questions