Using a JavaScript calculator to calculate the Math.power function

Question

I am designing my own JavaScript calculator with HTML values that look like this:

        <input type="button" class="button gray" 
        value="tan" onclick='tan()'>

        <input type="button" class="button black" value="3" 
        onclick='v("3")'>

And the JavaScript code looks something like this:

    function tan() {
      var getValue = document.getElementById("d").value;
      document.getElementById("d").value=Math.tan(getValue);
     }

     function v(val) {
         document.getElementById("d").value+=val;
      }

Where the ID "d" represents the screen in which the values from the buttons one presses are entered.

Where I'm having trouble is having a button utilize the Math.pow(a,b) function. Once you press the button with the value x^y I want these steps to be taken:

Take the value from element "d"
Take the value from the next button pressed and enter that as the second value in the Math.pow() function.

I've got step one down, I just haven't figured out step two. The JavaScript code I envision is something like this:

   function power() {
   var getValue = document.getElementById("d").value;
       ......   
       ......
       var powerTotal = Math.pow(getValue,nextValue);
       document.getElementById("d").value = powerTotal;
      }

(getValue is the initial value, nextValue is the value of the next button pressed after the power button is pressed)

Thank you for your help in advance!!!

So you want 1. input number x, 2. click pow, 3. input second number y, 4. click some kind of = button, 5. display result of Math.pow(x, y)? — Paul S.
– Paul S., Commented Feb 6, 2014 at 22:14

mgerton · Accepted Answer · 2014-02-07 02:01:10Z

Here's a potential solution:

First off, I'm not sure how your organizing your code but I would keep everything under some kind of namespace to prevent cluttering up everything. After that, i would have methods that map to each operation (in the return statement, those are "public" methods that can be called) and also store the arguments passed into the calculator in an array.

var Calculator = (function() {
    var _args = [];
    var _operation = '';

    return {
        store: function(val) {
            _args.push(val);
        },

        setOperation: function(op) {
            _operation = op;
        },

        operations: {
            pow: function() {
                return Math.pow(_args[0], _args[1]);
            },

            equals: function() {
                return this.operations[_operation].apply(this);
            }
        }
    };
}());

Here is where the magic happens. In a window.onload event (vanilla JS equivalent to jQuery's document.ready), get your input element and your buttons, and bind events to them to get the data you need. You can use onblur to get the input values as that will fire when you click each button (due to the field losing focus). When an operation button is clicked, store a string of the operation that's going to be used and that also maps to one of your "public" methods. When equals is clicked, you can call the equals method, which does some fancy JS meta-programming to call the correct function using Function.prototype.apply().

window.onload = function() {
    var inputField = document.getElementById('d');
    var equalsButton = document.getElementById('equals-btn');
    var powButton = document.getElementById('pow-btn');

    inputField.onblur = function() {
        Calculator.store(this.value);
    };

    powButton.onclick = function() {
        Calculator.setOperation('pow');
    };

    equalsButton.onclick = function() {
        // sets the original field to the answer like a real calculator would
        inputField.text = Calculator.operations.equals();
    };
};

This is all written off of the top of my head so there's a darn good chance I messed up somewhere, so treat this more like pseudocode than a concrete solution. The important thing to take away is methods of storing your data that is being input in a sequence, as well as storing state at a given point during the data entry (storing the operation).

Hopefully this helps a bit.

That seems like it will work. I will take your advice and let you know of my progress.

Collectives™ on Stack Overflow

Using a JavaScript calculator to calculate the Math.power function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related