October 19, 2018
Hot Topics:

# The Calculator

Stipper...

Here we go with a script that has been requested time and time again, a calculator. The script I'll be working with this time around has a very basic, but clever format originally sent to me by Saries. He calls it a Rainbow Calculator, for obvious reasons. Take a look and then we'll get started.

See it in action

(It's big. Get it all.)

Okay, the overriding first concern is the display. The calculator face is nothing more than a big table, five cells tall by eight cells across. You'll notice that some of the cells span across multiple cells. The display, for instance, rolls across five cells. The "backspace" and the "equals" buttons both span two. See that?

You'll find as we get into the calculator that the vast majority of the calculations are done inside the table using onClick Event Handlers. There are only a few functions involved for some of the larger returns.

Let's get into it. We'll attack the first line of cells in the table today. This is the line that includes the display, the backspace, and the clear buttons. This line is quite different than the others, so we'll take it by itself.

 ```
```
The Display

The display is created through the use of form commands that create a simple text box. The code looks like this:

 ```
```
Wait! There are two text boxes, but I only see one!

That's because one is hidden. See how the TYPE is set to HIDDEN? That's a great way to have a couple of boxes and only display one. Later on in the script we'll talk about the button that changes the number in the display from positive to negative, or back again. In order to do that, you need to exchange data back and forth. By using this hidden text box, we have a place to set the data before we move it back. Stay tuned, we'll get to that button soon enough.

The name of the form itself is "calculator." The name of the display text box is "text." In addition to a name, the box is also given a value set to nothing. See the empty quotes? That's to assure there's nothing in the display to start with.

Now, we know that any time we want to send something to the display we use the hierarchy document.calculator.text.value.

Backspace

The backspace button is next. The code looks like this:

 ``` ```
This button is a bit of a code monster. Before getting into it, let's stop and think about what it's supposed to do. By clicking the Backspace button, we want the last number in the display to be eliminated. To do that we need to make the JavaScript see that what is in the display text box is individual numbers in a string. If we do that, we can then set it so the last number of the string is eliminated with a click of the button.

Notice the button has a name and then and a value so that it displays correctly, but it's the onClick Event Handler that does the dirty work. When clicked, the value found in the display (document.calculator.text.value) is set to a substring. See how the command "substring" is added after the equal sign? In the instance (the parentheses) then, a comparison is set up. Remember that in a substring instance, the larger of two elements is performed. In this case, you have zero and then a calculation.

The calculation is the length of what appears in the display, times one, minus one. It's that minus one that does the trick. By taking one away, you clip off the last item in the substring (that's the last number), then by clicking the backspace button, you clip off the last number. Clever, no?

Clear

This pup works much the same way as the backspace button using an onClick to enact an effect upon the display.

 ``` ```
There's a name, then a value attached for display, then the magic of the onClick. By clicking on the button, you're setting the value of the display box to... well, nothing. See the empty single quotes? No matter what has come before or what is presently in the display text box, by clicking the clear button, you set it to nothing, thus you clear it.

Next we'll start on the numbers and the calculator functions. From here on out, the buttons all pretty much work the same way. The hard part is keeping them in the correct order so the table display is correct.

Next: The Other Buttons

Comment and Contribute

(Maximum characters: 1200). You have characters left.

## Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.

## Most Popular Developer Stories

Thanks for your registration, follow us on our social networks to keep up-to-date