PDA

View Full Version : how to dynamically re-generate random numbers in a table



George Lucas
Nov 19th, 2009, 04:24 PM
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>

{

jmrker
Nov 19th, 2009, 05:39 PM
Is this what you have in mind ...


<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!
:)

gusblake
Nov 19th, 2009, 05:59 PM
<!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.

Philip M
Nov 19th, 2009, 05:59 PM
Unique random numbers:-


<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)

jmrker
Nov 19th, 2009, 06:43 PM
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.



<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>

Philip M
Nov 19th, 2009, 07:31 PM
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);

jmrker
Nov 19th, 2009, 08:23 PM
Sorry, but your code does not generate unique random numbers.

Check with alert (randomArray);

Dang, you're right. Copied the wrong code... :o


for (var i=0; i<40; i++) { arr[i] = i+1; } // initialize in sequence

In the CreateLottoValues() function.

Thanks 'Phillip M' ... good eyes.

Philip M
Nov 19th, 2009, 09:37 PM
Dang, you're right. Copied the wrong code... :o


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. :)

jmrker
Nov 19th, 2009, 10:28 PM
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.