Online JavaScript Calculator

Article
08/12/2005

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

Anonymous
August 12, 2005
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!
Anonymous
August 12, 2005
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.)
Anonymous
August 12, 2005
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.
Anonymous
August 25, 2005
The comment has been removed
Anonymous
October 27, 2005
The comment has been removed
Anonymous
October 27, 2005
Yes. <a href="http://www.x24x7.com/cheap-insurance.html">cheap">http://www.x24x7.com/cheap-insurance.html">cheap insurance</a> ( http://www.x24x7.com/cheap-insurance.html )
Anonymous
December 27, 2005
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
Anonymous
January 07, 2006
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
Anonymous
January 09, 2006
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
Anonymous
January 22, 2006
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
Anonymous
January 22, 2006
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
Anonymous
March 23, 2006
Very good details and new. keep it posted.
Anonymous
May 04, 2006
This blog posting was of great use in learning new information and also in exchanging our views. Thank you.

Andrea Jasperson
admin@lowcostinsurancestructure.com
Anonymous
June 04, 2006
i like your website very much but please do get us more information about it
Anonymous
July 14, 2006
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...
Anonymous
August 29, 2006
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

Partager via

Online JavaScript Calculator

Comments

Ressources supplémentaires