Free Javascript Tutorials

home

JavaScript Tutorials

Arrays - a Lottery Programme (continued)

 Our quick javascript links Background Colour An Easy Rollover Browser Check if Statements for loops Javascript and Forms Little Programmes Colour Picker Lottery A simple calculator

## Shuffling the numbers in an Array

OK, the next thing we want to do is shuffle our numbers up. Once the numbers are shuffled up, we can just peel off the first six for our lottery numbers. Again, we'll use arrays inside loops to do this for us.

The code that shuffle the numbers up might be a tad complex at this stage of your programming career. The code is this:

for (i = 1; i < 50; i++) {
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}

When you add it to your other code, your script should look like this (new code is in red bold text):

<SCRIPT Language = JavaScript>

function getNumbers() {
temp = 0
newnumber = 0
document.frmOne.taAll.value = ""

TA = document.frmOne.taAll
lottery = new Array(49)

for (i = 1; i < 50; i++) {
lottery[i] = i
}

for (i = 1; i < 50; i++) {
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}

}
</SCRIPT>

The first few new lines are just setting up variables temp and newnumber, and clearing the text area:

temp = 0
newnumber = 0
document.frmOne.taAll.value = ""

Notice, too, that the code that inserted numbers into the text area has now been cut. We'll use another for loop to display the shuffled numbers. So our first for loop is just this:

for (i = 1; i < 50; i++) {
lottery[i] = i
}

That's the for loop that puts the numbers 1 to 49 into our array. But they are in a nice orderly fashion. What we want is to shuffle them up a bit. Hence our rather complex second for loop:

The idea behind our shuffle code is this: Grab a random number from 1 to 49. Store the current array value in a temp variable. Get the array[Random Number] value and put this into the current array value. Swap the current array value with the array[Random Number] value.

That explanation might not be quite so crystal clear, but all the code is doing is swapping numbers around. The first two lines in the for loop get us our random number:

newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)

The code Math.random() gets you a random number between 0 and 1. We're then multiplying that random number by 49, then adding 1. This will ensure that we get a random number between 1 and 49. Except, the number will be a floating point number. A rather long one. Something like this:

12.34528569

To chop off the part after the point, we can use the in-built function parseInt(). We need only pass it the number and what numerical base we want (10 will get you decimal).

The rest of the code works like this (assuming the random number generated is 12)

temp = lottery[1]
lottery[1] = lottery[12]
lottery[12] = temp

In other words, the numbers 1 and 12 have swapped places. Don't worry if you don't understand what's going on. The rest of the code is a lot easier.

OK, we've found a way to jumble up all our nice, orderly numbers. Now what?

Well, we can use a loop to display the results of all that jumbling. Add this for loop underneath the code that shuffled the numbers:

for (i = 1; i < 50; i++) {
TA.value = TA.value + "lottery[" + i + "] = " + lottery[i] + "\n"
}

All the code inside that loop is doing is putting the array values into the text area. It's adding a bit of text along side the values as well. Try it out and see what happens. You should now see something like this in your text area (click the link to test out the programme so far):

As you can see, our 49 numbers are nicely shuffled. All we need to do now is peel off the first six numbers and we have our very own lottery number generator. Which brings us neatly to an exercise.

### Exercise

Write the code that peels off the first six numbers. Display the results in a separate text area on the web page.

### Exercise

Amend your lottery programme to include the following:

• Six text boxes for entering lottery numbers
• One text box to display how many numbers came up
• One text box to display the number of draws

The finished programme might look something like this:

For this exercise, you're writing a programme that checks the lottery numbers from the six text boxes. The numbers in the six text boxes will be checked against those drawn in the text area under "winning lottery numbers".

Display how many numbers were correctly guessed. Display how many draws there have been. (This number will be incremented every time the "Get Lottery Numbers" button is clicked.)

You have already written most of the programme. To check the numbers in the text boxes against the winning numbers, you'll need one for loop inside another. Add a counter to record the number of winnings numbers.

And that wraps up this section on the basics of programming. You can move on to the next section, which is all about javascript Events, and javascript functions.

<--Back to the JavaScript Contents Page and the Next Section