Lotto Picker

My purpose in writing this script in the first place was to illustrate the use of a number of the Array methods built into JavaScript. By combining them together in the right way it is relatively easy to randomly select several numbers such as is required when you play lotto or pools (or whatever it is called in your country).

The basic "picks" function that I originally wrote used the Array push, sort, slice, and join methods to build an array containing all of the numbers from one to whatever is the biggest number on your particular lotto game, rearrange them into a "random" order and then retrieve the specified number of values from the start of the array. As the "random" sort turned out to not be as random as it had at first appeared my latest solution adds a new method to the Array object called "shuffle" which itself uses the push, pop, and splice Array methods to remove the bias of the original version.

Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
picks = function(pick,tot) {
var i, ary;
ary = [];
for (i = tot; i > 0; i--) ary.push(i);
return ary.slice(0,pick).join(',');

To see this in action simply enter the number of selections you require and the largest number on your lotto form into the following form. The randomly selected results will be displayed below the values that you input.

Lotto Picker

Of course having provided this example of how Array methods can be used to randomly select numbers for you to use for your lotto selections and having provided a working form that shows what the results of calling "picks" looks like I received numerous requests for the rest of the code needed to implement the entire form. As I had simply reused validation code from earlier scripts in adding the original form (since I hadn't originally intended to distribute the entire code) the validations used to make sure that meaningful numbers are input into the form were not quite as up to date in the way they were coded as they would have been had I intended making that code available in the first place and very primitive compared to the way I'd handle the validation now. A rewrite of the script to update everything (including the HTML) to use a more modern approach was needed.

The latest version of my lotto number picker script is now far less obtrusive than the prior version but still relies on JavaScript being enabled in order for the form to actually work (the simplest way to resolve this would be to use display:hidden in the CSS to hide the form and then set display = 'visible' as an extra line in the JavaScript - that would at least hide the form when CSS is enabled and JavaScript is disabled).

The main part of the processing for this script is still performed by the "picks" function. The rest of the script has been completely rewritten to use a more modern and less obtrusive approach. The validations for the two input fields has been greatly simplified as the first must be numeric and greater than zero while the second must be numeric and greater than the first. By placing a + immediately in front of the form field value reference we can convert it automatically from a string into a number (or NaN) and adding ||0 to the end will make it zero if the original value entered wasn't a number. This makes the comparison to test if a valid number was entered in each case into a simple comparison. We can keep the rest of the code simple by having a single function that displays either an error message or the results of the picks call depending on whether the input was valid or not.

Here's the HTML for the form, now rewritten to use a fieldset and legend to provide the form border and title, labels to attach the text descriptions of the fields to the input fields, and a div instead of a readonly input to display the result (as well as being used to display any error messages instead of using the JavaScript alert() function that is now only suitable for debugging scripts. I have also got rid of all the name attributes on the form and replaced them all with ids all of which start with "lotto" in order to reduce the chances that they clash with anything else in the page.


Here's the CSS that I attached to the head of the page in order to control how the form is displayed. It sets the width of the complete form and allocates a fixed space for displaying the result.


And finally, here's the complete JavaScript that you need to attach immediately before the </body> tag in order to get the above form to work. Note that the code to add the shuffle method to the Array object and the code to generate the addEvent function are outside of the anonymous function that I have wrapped the rest of the lotto picker code inside of because they can be used by any other scripts you add to your page as well (besides which adding shuffle to the Array object has global scope anyway regardless of where it is coded).



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow