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.