Home > DeveloperSection > Articles > Calculator in ASP.Net using Javascript

Calculator in ASP.Net using Javascript

Posted by  Alex R
on    July-27-2010 18:06 PM

ASP.Net ASP.Net 
Ratings:
2 Comment(s)
 5216  View(s)
Rate this:

Calculator in ASP.NET using JavaScript

Design code for above design (Default.aspx)

<head runat="server">

    <title>Calculator</title>   

//java script file

    <script src="calculation.js" type="text/javascript"></script>

   

//css for clear and close button

    <style type="text/css">

        #btnClear

        {

            z-index: 1;

            left: 322px;

            top: 344px;

            height:38px;

            position: absolute;

        }

        #btnClose

        {

            z-index: 1;

            left: 398px;

            top: 344px;

            height:38px;

            position: absolute;

        }

    </style>

   

</head>

<body onload="Page_Load()">

   

  

        <input id="btn0" type="button" value="0" style="position:absolute; top: 287px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(0)"/>

        <input id="btn9" type="button" value="9" style="position:absolute; top: 231px; left: 394px; height: 38px; width: 39px;" onclick="btn_Click(9)"/>

        <input id="btn8" type="button" value="8" style="position:absolute; top: 231px; left: 340px; height: 38px; width: 39px;" onclick="btn_Click(8)"/>

        <input id="btn7" type="button" value="7" style="position:absolute; top: 232px; left: 283px; height: 38px; width: 39px;" onclick="btn_Click(7)"/>

        <input id="btn6" type="button" value="6" style="position:absolute; top: 173px; left: 395px; height: 38px; width: 39px;" onclick="btn_Click(6)"/>

        <input id="btn5" type="button" value="5" style="position:absolute; top: 175px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(5)"/>

        <input id="btn4" type="button" value="4" style="position:absolute; top: 175px; left: 282px; height: 38px; width: 39px;" onclick="btn_Click(4)"/>

        <input id="btn3" type="button" value="3" style="position:absolute; top: 114px; left: 394px; height: 38px; width: 39px;" onclick="btn_Click(3)"/>

        <input id="btn2" type="button" value="2" style="position:absolute; top: 115px; left: 339px; height: 38px; width: 39px;" onclick="btn_Click(2)"/>

        <input id="btn1" type="button" value="1" style="position:absolute; top: 116px; left: 283px; height: 38px; width: 39px;" onclick="btn_Click(1)"/>

       

        <input id="btnEqual" type="button" value="=" style="position:absolute; top: 285px; left: 394px; height: 38px; width: 39px;" onclick="btnEqual_Click()"/>

        <input id="btnDec" type="button" value="." style="position:absolute; top: 286px; left: 285px; height: 38px; width: 39px;" onclick="btnDec_Click()"/>

        <input id="btnSub" type="button" value="-" style="position:absolute; top: 173px; left: 451px; height: 38px; width: 39px;" onclick="btnSub_Click()"/>

        <input id="btnDiv" type="button" value="/" style="position:absolute; top: 284px; left: 449px; height: 38px; width: 39px;" onclick="btnDiv_Click()"/>

        <input id="btnAdd" type="button" value="+" style="position:absolute; top: 114px; left: 448px; height: 38px; width: 39px;" onclick="btnAdd_Click()"/>

        <input id="btnMul" type="button" value="x" style="position:absolute; top: 229px; left: 449px; height: 38px; width: 39px;" onclick="btnMul_Click()"/>

 

        <input id="txtValue" type="text" style="position:absolute; top: 80px; left: 284px; width: 201px; text-align:right;"/>

        <input id="btnClose" type="button" value="Close" onclick="btnClose_Click()" /><input id="btnClear"

            type="button" value="Clear" onclick="btnClear_Click()"/>

   

</body>

 

 

 

JavaScript code for the above design(Calculation.js)

 

//initilizing values

//val to store value

var val=0;

//enumerated operator

var operators = { "Add":1, "Sub":2, "Mul":3, "Div":4, "Equal":5 };

//to check for operator clicked

var operator_clicked = 0;

//to chech whether number button is pressed nor not

var pressed;

//to check whether decinal button is pressed or not

var dec_pressed;

 

//equal function, which is called in every operators function

function equal()

{

    switch (operator_clicked)

    {

        case operators.Add:

//converting value of text box and adding it to val.

            val = (val + parseFloat(document.getElementById("txtValue").value));

            break;

        case operators.Sub:

            val = (val - parseFloat(document.getElementById("txtValue").value));

            break;

        case operators.Mul:

            val = (val * parseFloat(document.getElementById("txtValue").value));

            break;

        case operators.Div:

            val = (val / parseFloat(document.getElementById("txtValue").value));

            break;

        default:

            if (txtValue.Text != "")

                val = parseFloat(document.getElementById("txtValue").value);

            else

                val = 0;

                break;

    }

//displaying the value of val in text box.

    document.getElementById("txtValue").value = val;

//setting decimal pressed to false

    dec_pressed = false;

//setting number button pressed to false

    pressed = false;

}

 

//function called on page load

        function Page_Load()

        {

//initilizing values

                val = 0;

                operator_clicked = 0;

                pressed = false;

                dec_pressed = false;

                document.getElementById("txtValue").value = "0";

        }

 

//this is called on ever number button clicked event

        function btn_Click(a)

        {

//checking whether number button is pressed for the first time after any

//operator button click or page load or not.

            if (pressed ==false)

                document.getElementById("txtValue").value = "";

//setting value of pressed to true

            pressed = true;

//concatinating argument value to value of text box.

            document.getElementById("txtValue").value += a;

        }

 

//this function is called on add button clicked

       function btnAdd_Click()

        {

//equal() function is called

            equal();

//setting operator_clicked value to value of operator.Add ie. 1

            operator_clicked = operators.Add;                 

        }

 

        function btnSub_Click()

        {

            equal();

            operator_clicked = operators.Sub;         

        }

 

        function btnMul_Click()

        {

            equal();

            operator_clicked = operators.Mul;          

        }

 

        function btnDiv_Click()

        {

            equal();

            operator_clicked = operators.Div;    

        }

 

        function btnEqual_Click()

        {

            equal();           

            val = 0;

            operator_clicked = operators.Equal;

        }

 

//function called when clear button is pressed

        function btnClear_Click()

        {

//setting everything to its initial value.

            document.getElementById("txtValue").value = "";

            val = 0;

            operator_clicked = 0;

            pressed = false;

            dec_pressed = false;

        }

 

//this function is called when close button is clicked

        function btnClose_Click()

        {

//this will close the current window.

           window.close();

        }

 

//function called when decimal button is pressed

        function btnDec_Click()

        {

//checking whether number button is pressed or not

            if (pressed == false)

                document.getElementById("txtValue").value = "";

//checking whether decimal point already exist or not

            if (dec_pressed == false)

            {

                if (document.getElementById("txtValue").value == "")

                    document.getElementById("txtValue").value = "0.";

                else

                    document.getElementById("txtValue").value += ".";

            }

//setting dec_pressed and pressed to true

            dec_pressed = true;

            pressed = true;

        }

Screen shot


Calculator using WSDL

By akif dogan on   3 years ago
Hi, I'm trying to build a calculator just like a design of you but I also try to run it on via a web service(WSDL). So could you show me how to add this to my code? Thanks.

Calculator using WSDL.

By Awadhendra Tiwari on   3 years ago

Hi Akif,

You can create four method in WebService and call them in your application. Like you can create Add(), Delete() etc and

register that web service in you site then at the click event of Add button call Add() method from web service. By doing this you can perform it.

If you have any further query about it then you can join mindstick forum for technical support.
















Don't want to miss updates? Please click the below button!