Free Javascript Tutorials

home

JavaScript Tutorials

For Loops (continued)

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

A Times Table Programme

 

Design a web page that looks like the one below. (It's just basic HTML and shouldn't cause you too much trouble. Though, if you want to copy and paste all the code, you can click this link:)

Click here for the HTML code

Start Number: End Number: Multiply By:

Once you've designed your form, you can start the programming. The programme is quite simple: when the "Times Table" button is clicked, the times table specified in the "Multiply By" text box will appear in the Text Area below it (1 time 2 = 2, 2 times 2 = 4, 3 times 4 = 12, etc).

The Programme at the top of the page didn't do anything when you clicked the "Times Table" button. Here's one that does. Click the button to see what we're going to be programming:

Start Number: End Number: Multiply By:

The numbers in the first two text boxes (1 and 10) will be used for the start and end value of our for loop. So, here's the code: Add it to the HEAD section of your web page. Test it out and then move on to the explanation.

function calculate() {
start = document.frmOne.txtStart.value
end = document.frmOne.txtEnd.value
times = document.frmOne.txtTimes.value

if(Number(start) && Number(end) && Number(times)) {

start = Number(start)
end = Number(end)
times = Number(times)
result = document.frmOne.taOne

for(i = start; i <= end; i++) {
answer = i * times
result.value = result.value + (i + " times " + times + " = " + answer + "\n")
}

}
else {
alert("Please enter numbers in the boxes")
}
}

Granted, it might look a touch long and complicated, but it's not really - you can handle it. To help you, let's break it down and see what's going on.

We start by passing the values from the three text boxes into three variables:

start = document.frmOne.txtStart.value
end = document.frmOne.txtEnd.value
times = document.frmOne.txtTimes.value

Next, we set up an if … else statement to check that our user is typing numbers into our text boxes:

if(Number(start) && Number(end) && Number(times)) {

else {

}

The thing you need to be careful of here is that you have all the round brackets in place. Otherwise your programme won't work. But once we have our if … else statement set up we can enter our statements in between the curly brackets.

If the user has indeed entered all numbers, we need code to make the programme work. We start with these three lines:

start = Number(start)
end = Number(end)
times = Number(times)

All we're doing here is ensuring that JavaScript gets the point that they are actually numbers in the text box and not strings.

The next line is a bit new to you:

result = document.frmOne.taOne

The code document.frmOne.taOne is the Text Area on our form. All we're doing is storing the text area object itself into a variable called result. This is to save us having to type out document.frmOne.taOne.value = every time we need it. Now, we can just type result.value = and JavaScript will know what we mean.

And then we have our for loop. Here it is, minus the code that will display the result in the text area:

for(i = start; i <= end; i++) {
answer = i * times
}

In the round brackets of the for loop, we're saying, "Assign the value in the variable called start to the variable called i (i = start). Stop looping when the value in the variable called end is Less than or Equal to the value in the variable called i (i <= end). Every time round the loop, add one to the variable called i (i++)."

The code inside the for loop, the code that gets executed each time round the loop, is this:

answer = i * times

Remember, the variable times holds the times table, the 2 times table by default. This is being multiplied by whatever is inside the variable i. Each time round the loop, i will have a different value - first 1, then 2, then 3, etc. The answer is then stored in the variable that we called answer.

Finally, we displayed the result in our text area with this rather long line:

result.value = result.value + (i + " times " + times + " = " + answer + "\n")

It would have been even longer if we hadn't stored the text area into the variable called result. If we hadn't, the line would be this long:

document.frmOne.taOne.value = document.frmOne.taOne.value + (i + " times " + times + " = " + answer + "\n")

Which is very messy indeed. But all the line is doing is joining the various bits together: the variable i is joined with some direct text ("times "), which is joined with the variable times, which is joined with an equals sign ( " = " ), which is joined with the variable answer, which is joined with the new line character ( "\n" ). Phew! And it doesn't end there, because we need to keep whatever is already in the text area:

result.value = result.value +

The only thing left to do is write the code for the else statement. Fortunately, there not much to do there except display an alert box inviting the user to try again:

else {
alert("Please enter numbers in the boxes")
}

And that's it - your very own times table generator. If you have children, show them the programme you wrote. They'll be very impressed and tell you how brilliant you are. Children are like that.

Of course, your programme is not perfect, which I'm sure the children will discover. Especially if they enter a 10 as the start number and a 1 as the end number. Anything you can do to trap this error? Another if statement somewhere, perhaps?

In the next part, we'll deal with while and do loops. We'll keep it short!

Move on to the Next Part -->

<--Back to the JavaScript Contents Page