Online JavaScript Calculator


There are many online calculators. You’ve probably seen, and perhaps used,
several. Some calculate mortgage payments, others calculate costs, and even more
calculate goofy things, like the number of days, hours, minutes, and seconds since you were born.

Here’s a calculator that calculates … well … anything. It’s a
Windows-like calculator that’s similar to the one you have in your wallet
that lets you calculate how much money you have left in your checking account
after you write a check.

Here’s a picture.

When you use this calculator with the ShowModalDialog method (explained in greater detail in my blog post
Open a
page in a new window of a specific size
), you can return a calculated value
to the calling page. Here’s how it works: you provide a link to the calculator
from a Web page that references a JavaScript function that uses the
ShowModalDialog
method; then when a user closes the calculator, the total is returned to
the first page through the JavaScript function that called the
ShowModalDialog
method.  It’s really much more simple than it sounds.

Here’s some of the code

In the example
page
, the "Calculate Numbers" link, code shown below, references a
JavaScript function named OpenCalculator.

<a href="javascript:OpenCalculator();">Calculate Numbers</a>

The OpenCalculator function, shown in the following code, does a few
different things: it displays the calculator, returns a value from the
calculator, and places the returned value into a <span> tag.

function OpenCalculator()
{
 
var ret;
  var spanTag;

 
ret
= window.showModalDialog(
    "calculator.htm", "",
    "dialogHeight:285px;
    dialogWidth:215px;
    resizable:yes;");

 
spanTag = document.all.tags
    ("span").item("numbers");
 
spanTag.innerText = ret;
}

The calculator has several functions, too many to show here, and three global variables. The global
variables
store the numbers and operators that the calculator needs to calculate the
values. The variable named total stores the current number that is being
calculated. When a user clicks the equals button, total resets to zero. The
variable named op stores the operator so that when the user clicks the plus
button, the calculator knows to add the numbers. The last variable, named isNew,
is a Boolean that indicates whether to reset the calculation to zero.

Each of the buttons in the calculator calls a JavaScript function: the number
buttons call the SetNumber function, the operator buttons call the SetOperator
function, and the equals button calls the SetTotal function. Each of these
functions serves a very specific purpose, but the function that does all the
work is the Calculate function, shown in the following code. The Calculate
function takes the current operator (the operator button clicked last) and
calculates the last number entered (or the value in the number textbox) and places the
calculated value into the total variable.

function Calculate()
{
  var num = parseInt(document.Calculator.numbers.value);
  
  switch(op)
  {
    case "plus":
    {
      total += num;
      break;
    }
    case "minus":
    {
      total -= num;
      break;
    }
    case "multiply":
    {
      total *= num;
      break;
    }
    case "divide":
    {
      total /= num;
      break;
    }
    default:
    {
      break;
    } 
  }
  
  document.Calculator.numbers.value = total;
}

For an example of the calculator and the full code, see the example
page
.


Comments (16)

  1. John says:

    Pretty cool. I would enhance it to support double clicks. If you double click a number it would be equivalent to clicking on it twice. The other buttons could ignore the double click. Not critizing, just a suggestion!

  2. MSDNArchive says:

    That’s an excellent idea. Doing this should require a fairly simple change. For each of the number buttons, you would need both onclick and ondblclick events. For example, the code following shows for the number 7 button:

    ondblclick="SetNumber(7);" onclick="SetNumber(7);"

    (Note that using just the ondblclick event would mean that users would always have to double-click the button. Using both allows users to either single-click or double-click the numbers.)

  3. I would recommend replacing the sample:

    <a href="javascript:OpenCalculator();">Calculate Numbers</a>

    with

    <a href="serversidecalc.aspx" onclick="OpenCalculator();">Calculate Numbers</a>

    and modify OpenCalculator(); to return false;

    By doing this, things don’t break when JS is off or not supported. Returning false to onclick tells it not to handle the actual href destination; if js is off or not supported, it won’t do the onclick, just the href making the web application more robust.

    The href destination would probably be a JS is needed page, but in this case, you could easily make a page that roundtrips and does the calculations on the server as an alternative.

  4. Dail Magee Jr says:

    How did you know I keep a calculator in my wallet? Unless… Hey! Where’s my wallet?!

  5. Nothing to say, interisting point of view.

    ————————–

    John from <a href=’http://www.go-monaco.com‘>monaco hotels</a> (http://www.go-monaco.com) ***

  6. hey! stop and look at the site, This is very useful
    <a href="http://car-insurancequotes.org">Car Insurance Quotes</a> and <a href ="http://car-insurancequotes.org/quotecarinsurance.html">Quote Car Insurance </a>
    Good ! Keep It Up

  7. student says:

    The example page doesn’t work at all!I need the code for a project so I’d be happy if you can fix it.Thanx

  8. Lisa Wollin says:

    To student:

    I just checked the working sample, and it does work fine. However, you may have found a bug. If this is the case, please send me exact repro steps so that I can try to fix. Otherwise, feel free to grab the code and tweak it for yourself.

    Just click the text "example page" in the page above, and then click "Calculate Numbers". This gives you the calculator page. Once you have the calculator page, you can click the link "View code" to get the full code for the calculator.

    Hope this helps.

    Lisa

  9. Thanks for this great post. You’ve got some really good info in your blog. If you get a chance, you can check out my blog on low cost insurance

    at http://www.lowcostinsurancestructure.com.

    Sandra Booker

    http://www.lowcostinsurancestructure.com

  10. Thanks for this great post. You’ve got some really good info in your blog. If you get a chance, you can check out my blog on low cost insurance

    at http://www.lowcostinsurancestructure.com.

    Sandra Booker

    http://www.lowcostinsurancestructure.com

  11. College Loan says:

    Very good details and new. keep it posted.

  12. This blog posting was of great use in learning new information and also in exchanging our views. Thank you.

    Andrea Jasperson

    admin@lowcostinsurancestructure.com

  13. buy xanax says:

    i like your website very much but please do get us more information about it

  14. Ridge says:

    This doesn’t work in Firefox or any other Mozilla browser because they don’t support the ShowModalDialog function.  There are workarounds; you might want to update your code to work across the two most popular browsers…

  15. Anurag says:

    Hi,

    Hi,

    Calculator is good, but when ever i calculate any thing i have to click the "C" button, after that i can calculate the number, without pressing the "C" button, i can not calculate the number, it shows "0" in result pane.

    Eg. press button 2 then plus button the result will 0 in result pane

    Second thing : Decimal point " . "  button is not available in calculator

    Thanks in advance

    Regards,

    Anurag