One of Over 700 Sites
	with Guide Nate Kassebaum Bio | Contact

Subjects

Compatibility Reference Animation Scripts Cookie Scripts Image Scripts Text Scripts Frame Scripts Form Scripts HTML Scripts Navigation Scripts Password Scripts Time Scripts Window Scripts Software Beginner Tutorials Cookie Tutorials Image Tutorials Text Tutorials Form Tutorials Frame Tutorials Multimedia Navigation Tutors Time Tutorials Handling Variables Window Tutorials Subject Library  All articles on this topic

More Sites On This Topic

Apply to become a partner for this site.

A JavaScript Calculator

Dateline: 08/19/99

Here is a quick example of a few essential JavaScript topics.

The calculator above does pretty much what you would expect it to do. You enter a number, an operator, another number, press equals, and it gives you an answer.  Let's take a look at how this works.

First, we've got all the numbered buttons.  The HTML code for these buttons looks like this:

<input type="button" value=" 1 " onClick="calcNumber(1)">
<input type="button" value=" 2 " onClick="calcNumber(2)">
... and so on...

Then we've got the display.  This is the text box that the numbers appear in when you press the buttons.  The HTML code for that looks like this:

<input type="text" name="calcDisplay">

All of these elements are wrapped inside of a <form> tag, that looks like this:

<form name="calcForm">

When you click the numbered buttons, the calcNumber() function is called, which looks like this:

function calcNumber(thisNum) 
{
 document.calcForm.calcDisplay.value += ("" + thisNum); 
}

All this does is appends the number pressed to the end of the calculator display.  (Note: The "" + thisNum is necessary to convert thisNum from a number to a string.  If the "" part is omitted, the function would perform arithmetic addition instead of string addition.)

So far, pretty simple.  Next, we have the operator buttons.  The HTML code for these looks like this:

<input type="button" value=" + " onClick="calcOperator('+')">
<input type="button" value=" x " onClick="calcOperator('*')">
... and so on ...

When you click on one of these buttons, the computer needs to remember what operator you chose (so it can perform the correct operation when you click the equals button).  In order to do this, I have included a hidden form element called "calcOperatorMemory."

<input type="hidden" name="calcOperatorMemory" value="">

Also, after you click on an operator, the computer will need to remember what number you entered so you can enter another number.  This is handled in a similar way, with a form element called "calcNumberMemory."

<input type="hidden" name="calcNumberMemory" value="">

The calcOperator() function assigns values to calcOperatorMemory and calcNumberMemory so that the computer knows which operator you clicked on and which number was entered.  The calcOperator() function looks like this:

function calcOperator(thisOp) 
{
 document.calcForm.calcOperatorMemory.value = thisOp;
 document.calcForm.calcNumberMemory.value = document.calcForm.calcDisplay.value;
 document.calcForm.calcDisplay.value = ""; 
}

Finally, there is the equals button, which looks like this:

<input type="button" value=" = " onClick="calcEquals()">

The calcEquals function checks to see which operation was selected, and performs that operation on the number in calcNumberMemory and the number currently in the display.  The result is then written to the display.  Here is the calcEquals function:

function calcEquals()
{
 if (document.calcForm.calcOperatorMemory.value == '/')
  {
  document.calcForm.calcDisplay.value = document.calcForm.calcNumberMemory.value / document.calcForm.calcDisplay.value;
 }
 else if (document.calcForm.calcOperatorMemory.value == '*')
 {
  document.calcForm.calcDisplay.value = document.calcForm.calcNumberMemory.value * document.calcForm.calcDisplay.value;
 }
 else if (document.calcForm.calcOperatorMemory.value == '+')
 {
  document.calcForm.calcDisplay.value = (document.calcForm.calcNumberMemory.value - 0) + (document.calcForm.calcDisplay.value - 0);
 }
 else if (document.calcForm.calcOperatorMemory.value == '-')
 {
  document.calcForm.calcDisplay.value = document.calcForm.calcNumberMemory.value - document.calcForm.calcDisplay.value;
 } else {
  alert ("You must choose an operator.");
 }
}

Here is the complete cut-n-paste source code:

Visit the message boards!

Previous Features