www.webdeveloper.com
Results 1 to 15 of 15

Thread: Random Lottery Number Generating Form Fields

  1. #1
    Join Date
    Jul 2013
    Posts
    7

    Random Lottery Number Generating Form Fields

    I want a user to have the option of inputing lottery number selections into a form manually OR by clicking a button that will quick-pick the numbers for them. This script below only prints the numbers but I want those numbers to appear inside of a form field. How do I do this?

    <script type="text/javascript" language="javascript">
    var lotto = {
    max : 49,
    num : 6,
    mega: 1
    }


    function lottery() {
    printNumbers(getNumbers((lotto.num+lotto.mega),lotto.max),"lotto");
    }


    function printNumbers(numbers,type){
    for(var x in numbers){
    document.getElementById(type+x).innerHTML = numbers[x];
    }
    }

    function getNumbers(totalBalls,balls) {
    var numbers = [];
    for (var i = balls; i > 0; i--){
    numbers.push(i);
    }
    numbers.sort(
    function(){
    return (Math.round(Math.random())-0.5);
    }
    );
    return numbers.slice(0,totalBalls);
    }
    </script>

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    What's the HTML code for the lottery selection fields?

    If you assign them ID's of lotto1, lotto2, lotto3, etc, then a small change of the code of printNumbers() from .innerHTML= to .value= should work.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Wink

    Tried to use most of your original code ... changed just enough to display values.

    You don't specify what kind of form element you want to write to, so I wrote to two different elements (div and input).

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Lottery Numbers </title>
    
    </head>
    <body>
    <button onclick="lottery()">Get Lottery</button>
    
    <div id="lotto"></div>
    <input type="text" id="lottoValues" value="">
    
    <script type="text/javascript">
    var lotto = {
      max : 49,
      num : 6,
      mega: 1
    }
    
    function lottery() {
      printNumbers(getNumbers((lotto.num+lotto.mega),lotto.max),"lotto");
    }
    
    var numbers = [];
    function printNumbers(numbers,type) {
      var str = '';
      for(var x in numbers) { str += numbers[x]+' '; }
      document.getElementById(type).innerHTML = str;
      document.getElementById(type+'Values').value = str;
    }
    
    function getNumbers(totalBalls,balls) {
      for (var i = balls; i > 0; i--) { numbers.push(i); }
      numbers.sort(
        function(){ return (Math.round(Math.random())-0.5); }
      );
      return numbers.slice(0,totalBalls);
    }
    
    </script>
    
    </body>
    </html>
    BTW, you should enclose your script between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to find, copy, test and/or repost modifications.

  4. #4
    Join Date
    Jul 2013
    Posts
    7

    Thanks but...

    How do I get each value into it's own individual text fields? I want the user to be able to enter their own number or quickpick them.

  5. #5
    Join Date
    Jun 2008
    Posts
    106
    Code:
    <form action="" onsubmit="return false;">
        <input type="text" size="4" id="num_0" />
        <input type="text" size="4" id="num_1" />
        <input type="text" size="4" id="num_2" />
        <input type="text" size="4" id="num_3" />
        <input type="text" size="4" id="num_4" />
        <input type="text" size="4" id="num_5" />
        <input type="text" size="4" id="num_6" />
        <input type="button" value="Generate" onclick="lottery();" />
        <input type="button" value="Submit" onclick="return false;" />
    </form>

    Code:
    var lotto = {
        max: 49,
        num: 6,
        mega: 1
    };
    
    function getNumbers(totalBalls, balls) {
        var numbers = [];
        while (balls > 0) {
            numbers.push(balls--);
        }
        numbers.sort( function () { return 0.5 - Math.random(); } );
        return numbers.slice(0, totalBalls);
    }
    
    function lottery() {
        var numbers = getNumbers( (lotto.num + lotto.mega), lotto.max),
            i;
        for (i = 0; i < numbers.length; i += 1) {
            document.getElementById('num_' + i).value = numbers[i];
        }
    }
    Last edited by tenfold; 07-31-2013 at 12:05 AM. Reason: Misread the question

  6. #6
    Join Date
    Jul 2013
    Posts
    7

    Semi working

    The fields are separate now however the mega number should be able to have a duplicate number to one of the 5 regular numbers. The code right now does not allow this. Any ideas?

  7. #7
    Join Date
    Jun 2008
    Posts
    106
    I don't know how lottery works, so you're going to have to figure that out, lol.

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    There is not a good idea to use the sort method with Math.random()-0.5. The probability density depends on the browser and is rarely uniform.
    Show this page to see the differences...

    I prefer to use a randomChoice without repetition
    Code:
    <body>
    <div id="pge"><fieldset><legend>Tirage du Loto</legend>
        <p><input id="rsp" type="text"></p>
        <p><input type="button" onclick="newChoice()" value="Nouveau tirage"></p>
    </fieldset></div>
    <script type="text/javascript">
    // The method to choice a random element on an array and to reduce the array
    Array.prototype.randomChoice=function(){return this.splice(Math.floor(Math.random()*this.length),1)}
    // The possible values for loto
    var i,arrOrig=[];
    for (i=0;i<49;i++) arrOrig[i]=i+1;
    // To choose 6 values without repetition
    function newChoice(){var arr=arrOrig.slice(0),str='',n=6;
       while (0<n--) str+=', '+arr.randomChoice();
        document.getElementById('rsp').value=str.substr(2);
    }
    newChoice();
    </script>
    </body>
    Last edited by 007Julien; 07-31-2013 at 05:48 PM.

  9. #9
    Join Date
    Jul 2013
    Posts
    7

    Amazing!

    Wow!!! That's amazing how much better your method is. A problem still exists however. The lottery picks 5 numbers and 1 mega number. So we need 5 random non-duplicating numbers up to 58 and 1 random number all by itself up to 35. Got it?

  10. #10
    Join Date
    Jul 2013
    Posts
    7
    This code accomplishes the both the regular numbers and the mega number but I think it is still using Math.random...

    [script]var usedNum = new Array();

    function getUniqueRandom(factor) {
    var num, index;
    var looking = true;
    do {
    num = Math.floor(Math.random() * factor)
    for (index = 0; index < usedNum.length; index++) {
    if (usedNum[index] == num) {
    break;
    }
    }
    if (index == usedNum.length) {
    usedNum[usedNum.length] = num;
    looking = false;
    }
    } while (looking);
    return num;
    }

    function generateNumber(lotto) {
    usedNum.length = 0;
    lotto.number1.value = getUniqueRandom(59) + 1;
    lotto.number2.value = getUniqueRandom(59) + 1;
    lotto.number3.value = getUniqueRandom(59) + 1;
    lotto.number4.value = getUniqueRandom(59) + 1;
    lotto.number5.value = getUniqueRandom(59) + 1;
    lotto.number6.value = Math.floor(Math.random() * 35) + 1
    }
    [/script]

  11. #11
    Join Date
    Jul 2013
    Posts
    7
    Code:
    var usedNum = new Array();
    
    function getUniqueRandom(factor) {
        var num, index;
        var looking = true;
        do {
            num = Math.floor(Math.random() * factor)
            for (index = 0; index < usedNum.length; index++) {
                if (usedNum[index] == num) {
                    break;
                }
            }
            if (index == usedNum.length) {
                usedNum[usedNum.length] = num;
                looking = false;
            }
        } while (looking);
        return num;
    }
    
    function generateNumber(lotto) {
       usedNum.length = 0;
       lotto.number1.value = getUniqueRandom(59) + 1;
       lotto.number2.value = getUniqueRandom(59) + 1;
       lotto.number3.value = getUniqueRandom(59) + 1;
       lotto.number4.value = getUniqueRandom(59) + 1;
       lotto.number5.value = getUniqueRandom(59) + 1;
       lotto.number6.value = Math.floor(Math.random() * 35) + 1
    }

  12. #12
    Join Date
    Jul 2013
    Posts
    7
    The html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src = "powerball.js">
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Random Lotto Number Generator</title>
    </head>
    
    <body>
    <form name="lotto" action="">
    
    <table class="lottery_table">
    
    <tr>
    
    <td class="lottery_table"><input type = "text" name = "number1" value = "" size = 2></td>
    
    <td class="lottery_table"><input type = "text" name = "number2" value = "" size = 2></td>
    
    <td class="lottery_table"><input type = "text" name = "number3" value = "" size = 2></td>
    
    <td class="lottery_table"><input type = "text" name = "number4" value = "" size = 2></td>
    
    <td class="lottery_table"><input type = "text" name = "number5" value = "" size = 2></td>
    
    <td class="lottery_table"><span class="redfont">Powerball</span></td>
    
    <td class="lottery_table"><input type = "text" name = "number6" value = "" size = 2></td>
    
    </tr>
    
    </table>
    
    <p class="center"><input type = "button" value = "Generate Lotto Numbers" onClick = "generateNumber(this.form)">
    
    &nbsp;&nbsp;
    
    <input type = "reset" value = "Reset"></p>
    
    </form>
    </body>
    </html>

  13. #13
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    Your method is valid but would be very long to shuffle, for example, a card game. At the end it's very difficult to find the last numbers. With the proposed prototype you have only to write
    Code:
    Array.prototype.randomChoice=function(){return this.splice(Math.floor(Math.random()*this.length),1)}
     
    var i,newGame=[]; 
    for (i=0;i<52;i++) newGame[i]=1; 
    // A random game 
    function shuffleGame(){
        var game=newGame.slice(0),rsp=[];
        while (game.length) rsp.push(game.randomChoice());
        return rsp;
    }
    Last edited by 007Julien; 07-31-2013 at 06:04 PM.

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    Quote Originally Posted by 007Julien View Post
    Your method is valid but would be very long to shuffle, for example, a card game. At the end it's very difficult to find the last numbers. With the proposed prototype you have only to write
    Code:
    Array.prototype.randomChoice=function(){return this.splice(Math.floor(Math.random()*this.length),1)}
     
    var i,newGame=[]; 
    for (i=0;i<52;i++) newGame[i]=1; 
    // A random game 
    function shuffleGame(){
        var game=newGame.slice(0),rsp=[];
        while (game.length) rsp.push(game.randomChoice());
        return rsp;
    }
    One minor typo. Change:
    for (i=0;i<52;i++) newGame[i]=i;

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    Thanks JMRKER, I should have put my glasses to remove the +1 !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles