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 is created through the use of form commands that create a simple text box. The code looks like this:
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.
The backspace button is next. The code looks like this:
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?
This pup works much the same way as the backspace button using an onClick to enact an effect upon the display.
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