Free Javascript Tutorials

home

JavaScript Tutorials

Variables (continued)

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Adding numbers in textboxes

 

We'll design a web page with a three text boxes and a command button. When the command button is clicked, any numbers in the first two boxes will be added together. The answer will appear in the third text box. Here's what your form will look like when it's finished (The button doesn't do anything yet, if you click it):

Number One: Number Two:

Total:

          

So you type a number into the Number One text box, and type a number into the Number Two text box. When the "Add Numbers" button is clicked, the total will appear in the "Total" box. Let's design the HTML Form first (You can copy and paste this).

<FORM NAME = frmOne>

Number One: <INPUT TYPE = Text NAME = txtFirstNumber SIZE = 5 value ="">

Number Two: <INPUT TYPE = Text NAME = txtSecondNumber SIZE = 5 value ="">
<P>
Total: <INPUT TYPE = Text NAME = txtThirdNumber SIZE = 5 value = "">
<P>
<Input Type = Button NAME = b1 VALUE = "Add Numbers" onClick = calculate()>

</FORM>

OK, it might look a bit messy, but it's just a standard HTML form. You can use your HTML Editor to design it. Note a few things about the form, though. First, that the form has a NAME:

<FORM NAME = frmOne>

When we're writing the code, we need to tell the browser which form we're talking about. Our form is called "frmOne". For the very same reason, all three text boxes have NAMES:

txtFirstNumber
txtSecondNumber
txtThirdNumber

Note, too, that all three text boxes have a VALUE attribute.

The button has an onClick event that is crucial to the operation:

onClick = calculate( )

Remember that name - calculate( ). We're going to be seeing that in the SCRIPT section. So, in the HEAD section of your web page, write the following script:

<SCRIPT language = JavaScript>

function calculate() {
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
C = (A + B)
document.frmOne.txtThirdNumber.value = C
}

</SCRIPT>

A function is a way to group together a section of code. This function will calculate the two numbers from our text boxes, and pop the answer in the third text box. The syntax for a JavaScript function is this:

function FunctionName() {

}

Our FunctionName was calculate(), which was the one from the command button. When the button is clicked, the browser will try to find a function called calculate(). Note that when setting up a function you need a lowercase "f" and not a capital "F". After the name of your function, type a pair of round brackets. You can put something called an argument in between the round brackets. But our function has no arguments, so we just leave them empty. After the round brackets, type a space, then type a left curly bracket { . The code for the function itself goes next (on a new line), and then you type a right curly bracket }.

Here's our function again:

function calculate() {

A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
C = (A + B)
document.frmOne.txtThirdNumber.value = C

}

The first line of the code is this:

A = document.frmOne.txtFirstNumber.value

The value we're putting in the variable called "A" is coming from the first text box. The part on the right of the equals sign ( = ) might look a bit long and complicated, but all we're doing is telling the browser which text box we're referring to. We're saying this:

"In the document there is a form called frmOne. This form has a text box called txtFirstNumber. Whatever value has been typed into this text box, store it in the variable called A."


We do the same for the second text box, storing its value in the variable called B.

The third line of code adds together the two values A and B. The total is then stored in the variable called C.

Once we have our answer in C, we then need to store it in the third text box on the form. So we have to say "Assign the value in the variable called C to the text box called txtThirdNumber."

document.frmOne.txtThirdNumber.value = C

To finish it all off, we type our right curly bracket }.

So, after you've finished typing all that code, load it into your browser and give it a try. Test out the boxes and button below, to see what yours should do. Enter a 2 in the first box, and a 2 in the second box. Then click the Add Numbers button. You should get 22!

Number One: Number Two:

Total:

 

To find out what went wrong, read the next part!

Move on to the Next Part -->

<--Back to the JavaScript Contents Page