Creating an Object in JavaScript that does math calculations using values retrieved from a text box?

Question

I'm trying to make a calculator using Objects. Here is JSFiddle: http://jsfiddle.net/jNqEv/4/

I was using this code in order to do the computations of the numbers while I made the rest of the calculator:

/*Computes the values inside the box and returns the answer.*/
function compute(form)  
{
    form.display.value = eval(form.display.value); 
}

Now I need to create an Object that does the calculations instead of using the JavaScript predefined Object eval. I was thinking something like this:

Basically this Object takes the values from the text box with the id "input" The values would be in the form of 2*3, 1+2,5/7 etc... So I was thinking if I pulled the second piece of data in the string using substr I could then check to see if it was multiply, divide, subtract, or addition.

    function calc(arithmetic)
{
    this.arithmetic = arithmetic;
}        

var myCalc = new calc(input)
    {
    function maths (input) 
{
    var str = input;
    var a=str.substr(1,1); // example: 1+2   var a holds the 1
    var b=str.substr(2,1); //                var b holds the "+"
    var c=str.substr(3,1); //                var c holds the 2
                           // if the sign is equal to "+" add var a plus var b
                           // and then place them inside answerNumber.
                           // then take answerNumber and place its value
                           // inside the page element with the id "input"
    if(b == "+")
    {
        answerNumber = a + c;
    }
    else if(b == "-")
    {
        answerNumber = a + c;
    }
    else if(b == "*")
    {
        answerNumber = a * c;
    }
    else if(b == "/")
    {
        answerNumber = a / c;
    }
    document.getElementById("input").value=answerNumber;
        }


    }

I've tried reading up on various websites about Objects but they just are not helping at all, here are some of the places I went: "http://www.crockford.com/javascript/private.html" , "http://www.w3schools.com/js/js_objects.asp" among other places. For what I'm trying to do these do not seem to be very useful. Maybe some of you could help.

Here is the button and the text box that the object function will be trigger from and placed into:

Here is my entire sheet of code including the external JavaScript.

HTML:

 

Assignment 2



Calculator























































Instructions:


Click a number, then an action, then another number, then the '=' button.

Press 'C' when ready to start over. 

The 'N' makes your previous number negative.

The 'L' button requires one number to be avalible,

It will loop through "that number" to "ten plus that number"

 and add all values and display.



For example 1+2+3+4+5+6+7+8+9+10 = 55





Navigator:

External JavaScript:

/* gets the input from the keyboard OR clicking the button */
function addChar(input, character) 
{
if(input.value == null || input.value == "0")
    input.value = character;
else
    input.value += character;
}


/*changes the sign of the number inside the input box from negative to positive.*/
function changeSign(input) 
{
if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length);
else
    input.value = "-" + input.value;
}


/*Computes the values inside the box and returns the answer.*/
function compute(form)  
{
    form.display.value = eval(form.display.value); /*The Calculator uses an Object for all calculations*/
}                


/* Loops the input by the value + 10 */
function Loop(input)
{
     var num = parseInt(input) + 10;
     var i=0;
     var sum=0;

    while(i < num)
        {
            sum=sum+i;
            i++;
        }
    document.getElementById("input").value=sum;

}

/*Compute Arithmetic*/
function calc() //creating an empty object named calc
{
}

var calc = new calc(); //creating a new instance of the calc object

calc.arithmetic = function maths (input) 
{
    var str = input;
    var a=str.substr(1,1); 
    var b=str.substr(2,1);
    var c=str.substr(3,1);

    if(b == "+")
    {
        answerNumber = a + c;
    }
    else if(b == "-")
    {
        answerNumber = a + c;
    }
    else if(b == "*")
    {
        answerNumber = a * c;
    }
    else if(b == "/")
    {
        answerNumber = a / c;
    }
    document.getElementById("input").value=answerNumber;
}

So any way that you can point me in the right direction is appreciated.

Bergi · Accepted Answer

I don't know why you think you would need an object here. Just put them in a function - you have that maths function already. The code around it is only a syntax error.

Usually, by var myCalc = new calc(input); you create an instance of the calc constructor - it should not be followed by a function body. Also, by doing

function calc() {}
var calc = new calc();

you just overwrite the calc function with its instance - very strange.

If you want to namespace your functions, i.e. put them as properties onto an object (which is a good idea), you should use a simple Object literal. No need for a constructor function that would create multiple instances, you only need one:

var calc = {
   arithmetic: function maths (input) { … }
};
// then call
calc.arithmetic("1+3");
// which sets the input field to "4"

Creating an Object in JavaScript that does math calculations using values retrieved from a text box?

Answers (1)

Related Questions