Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to dynamically re-generate random numbers in a table

    i have a table with a couple random numbers, and i want to click a button that will dynamically regenerate the numbers each time the button is clicked without re-generating the entire table., im using DOM and innerhtml for these random numbers. heres the javascript and html code. so far, it just generates the random numbers when the page loads.


    var random = Math.floor(Math.random()*40 + 1) //sets variables for random numbers to generate
    var random2 = Math.floor(Math.random()*40 + 1)
    var random3 = Math.floor(Math.random()*40 + 1)
    var random4 = Math.floor(Math.random()*40 + 1)
    var random5 = Math.floor(Math.random()*40 + 1)
    var random6 = Math.floor(Math.random()*40 + 1)

    //create table
    function makeTable(lotto)

    document.getElementById("tableSpan").innerHTML = '<table border="1" id="lotto">';
    var caption=document.getElementById('lotto').createCaption();

    caption.innerHTML="JavaScript Random Numbers";

    var x=document.getElementById('lotto').insertRow(0);
    var cell1=x.insertCell(0);
    var cell2=x.insertCell(1);
    var cell3=x.insertCell(2);
    var cell4=x.insertCell(3);
    var cell5=x.insertCell(4);
    var cell6=x.insertCell(5);

    cell1.innerHTML='<td class = "normal">'+ random +'</td>';
    cell2.innerHTML='<td class = "normal">'+ random2 +'</td>';
    cell3.innerHTML='<td class = "normal">'+ random3 +'</td>';
    cell4.innerHTML='<td class = "normal">'+ random4 +'</td>';
    cell5.innerHTML='<td class = "normal">'+ random5 +'</td>';
    cell6.innerHTML='<td class = "red">'+ random6 +'</td>';
    }

    heres the HTML file:

    <body onload="makeTable('lotto');">

    <div id="container">

    <div id="header">
    <h1>Welcome</h1>
    </div>

    <div id="content">
    <span id="tableSpan"></span>
    <input type="button" value="Re-generate Numbers" onclick="makeTable('lotto');" />
    </div>

    {

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb Consider these changes ...

    Is this what you have in mind ...
    Code:
    <html>
    <head>
    <title>Lotto Table</title>
    <style type="text/css">
    .normal { width:40px; font-size:1.5em; }
    .red { color:red; width:40px; font-size:1.5em; }
    </style>
    
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=182522
    
    var random1, random2, random3, random4, random5, random6;
    var randomArray = [0,0,0,0,0,0];
    
    //sets array variables to random numbers
    function CreateLottoValues() {
      for (var i=0; i<randomArray.length; i++) {
        randomArray[i] = Math.floor(Math.random()*40 + 1); 
      }
    }
    
    //create table
    function UpdateTable() {
      CreateLottoValues();
      for (var i=0; i<randomArray.length; i++) {
        tmp = 'cell'+(i+1);
        document.getElementById(tmp).innerHTML = randomArray[i]; 
      }
    }
    </script>
    </head>
    <body onload="UpdateTable();">
    <center>
    <div id="container">
    
    <div id="header"> <h1>Welcome</h1> </div>
    
    <div id="content">
     <span id="tableSpan">
      <table border="1" id="lotto">
      <caption>JavaScript Random Numbers</caption>
      <tr>
       <th class="normal" id="cell1">&nbsp;</th>
       <th class="normal" id="cell2">&nbsp;</th>
       <th class="normal" id="cell3">&nbsp;</th>
       <th class="normal" id="cell4">&nbsp;</th>
       <th class="normal" id="cell5">&nbsp;</th>
       <th class="red" id="cell6">&nbsp;</th>
      </tr>
      </table>
     </span>
     <input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
    </div>
    </center>
    </body>
    </html>
    Only thing I might change is that you have no checks for duplicated lotto numbers in the random generation function.
    Should be a fairly easy modification should you find it important.

    Good Luck!

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/dtd/htmlstrict.dtd">
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript">
    function generateTable(id) {
    var numbers=[];
    for(i=0;i<6;i++) numbers[i]=Math.floor(Math.random()*40 + 1);
    
    var table=document.getElementById(id);
    var row=document.createElement('tr');
    
    for(i in numbers) {
    var cell=document.createElement('td');
    row.appendChild(cell);
    var n=document.createTextNode(numbers[i]);
    cell.appendChild(n);
    //Edit:
        cell.style.color=(i==5)?"red":"black";
    }
    
    while(table.childNodes.length>0) table.removeChild(table.firstChild);
    
    table.appendChild(row);
    }
    </script>
    </head>
    <body onload="generateTable('container')">
    <table id="container" border="1">
    </table>
    
     <input type="button" value="generate" onclick="generateTable('container')">
    </body>
    </html>
    No need for all the repeated code.
    Last edited by gusblake; 11-19-2009 at 06:06 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Unique random numbers:-

    Code:
    <script type = "text/javascript">
    
    function getNumbers() {
    var temp = 0;
    var newnumber = 0;
    var result ="";
    var chosen = new Array(40);  // highest number required
    
    for (i = 1; i < 41; i++) {  // initialise array - lowest number = 1
    chosen[i] = i;
    }
    
    for (i = 1; i < 41; i++) {   // shuffle array
    newnumber = (Math.random() * 40) + 1;
    newnumber = parseInt(newnumber, 10);
    temp = chosen[i];
    chosen[i] = chosen[newnumber];
    chosen[newnumber] = temp;
    }
    
    for (var i = 1; i <=6; i++) {  // take first six numbers from shuffled array
    result = result + " " + (chosen[i]);
    }
    alert (result);
    
    }
    
    </script>
    </head>
    
    <body onload ="getNumbers()">
    
    <input type = "button" value = "Generate 6 Unique Random Numbers" onclick = "getNumbers()">
    
    </body>
    “Pessimist: One who, when he has the choice of two evils, chooses both.”
    Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)
    Last edited by Philip M; 11-19-2009 at 06:09 PM. Reason: Add requested button

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    I thought the original request was to NOT TO RE-CREATE the table each pass. Was I mis-understanding?

    In the following, I added the 'unique' random number display logic with just 3 extra lines.

    Code:
    <html>
    <head>
    <title>Lotto Table</title>
    <style type="text/css">
    .normal { width:40px; font-size:1.5em; }
    .red { color:red; width:40px; font-size:1.5em; }
    </style>
    
    <script type="text/javascript">
    // From: http://codingforums.com/showthread.php?t=182522
    
    // shuffle - non-prototype method
    function RandomizeArray() { return Math.round(Math.random()) - 0.5; }
    
    var randomArray = new Array();
    
    //sets array variables to random numbers
    function CreateLottoValues() {
      var arr = new Array();
      for (var i=0; i<40; i++) { arr[i] = Math.floor(Math.random()*40)+1; }
      randomArray = arr.sort(RandomizeArray);	// using non-prototype method
    }
    
    //create table// 
    function UpdateTable() {
      CreateLottoValues();
      for (var i=0; i<6; i++) {
        tmp = 'cell'+(i+1);
        document.getElementById(tmp).innerHTML = randomArray[i]; 
      }
    }
    </script>
    </head>
    <body onload="UpdateTable();">
    <center>
    <div id="container">
    
    <div id="header"> <h1>Welcome</h1> </div>
    
    <div id="content">
     <span id="tableSpan">
      <table border="1" id="lotto">
      <caption>JavaScript Random Numbers</caption>
      <tr>
       <th class="normal" id="cell1">&nbsp;</th>
       <th class="normal" id="cell2">&nbsp;</th>
       <th class="normal" id="cell3">&nbsp;</th>
       <th class="normal" id="cell4">&nbsp;</th>
       <th class="normal" id="cell5">&nbsp;</th>
       <th class="red" id="cell6">&nbsp;</th>
      </tr>
      </table>
     </span>
     <input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
    </div>
    </center>
    </body>
    </html>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by jmrker View Post

    In the following, I added the 'unique' random number display logic with just 3 extra lines.
    Sorry, but your code does not generate unique random numbers.

    Check with alert (randomArray);

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Unhappy Whoops!

    Quote Originally Posted by Philip M View Post
    Sorry, but your code does not generate unique random numbers.

    Check with alert (randomArray);
    Dang, you're right. Copied the wrong code...
    Code:
      for (var i=0; i<40; i++) { arr[i] = i+1; }    // initialize in sequence
    In the CreateLottoValues() function.

    Thanks 'Phillip M' ... good eyes.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by jmrker View Post
    Dang, you're right. Copied the wrong code...
    Code:
      for (var i=0; i<40; i++) { arr[i] = i+1; }    // initialize in sequence
    In the CreateLottoValues() function.

    Thanks 'Phillip M' ... good eyes.
    OK, but I am not sure how your code is materially different to/better than the code I posted which uses only one array.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts
    I did not say it is better, only different.

    Main difference is the one line function acting as an array randomizer compared to your multi-line shuffler.


  •  

    Posting Permissions

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