user2637639
Reputation: 47
how to generate random number in each rows and columns
i want to generate random number in each row and columns. i write below like this. it generate only two rows . I want to create 4*4 suduku. so that i given like this
<script type="text/javascript">
var random1, random2, random3, random4;
var randomArray = [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()*4 + 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">
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" ><input type="text" name=""></td>
<td class="normal" > </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
</table>
</span>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
Please help me to generate random numbers in all rows and columns.Thanks in advance.
Upvotes: 3
Views: 7047
Answers (4)
joseph dow
Reputation: 1
function checkForDraw() {
var count = 0;
for(var i = 1; i < 10; i++){
var currentCell = document.getElementById("cell" + [i]);
if (currentCell.innerHTML == "O" || currentCell.innerHTML == "X"){
count = count + 1;
}
}
if(count == 9){
return true;
} else {
return false;
}
}
Upvotes: 0
Paul
Reputation: 27503
I have a library which might make this easier.
It is called html5csv.js
Here is a JSFIDDLE of your 4x4 randomized table problem.
html
<div id='content'></div>
<div id='control'>
<button id='start'>click to randomize</button>
</div>
javascript/jQuery/ with html5csv.js loaded
$(function(){
$('#start').on('click',
CSV.begin('%F', {
header: ['a','b','c','d'],
dim:[4,4],
func: function(r,c){ return Math.floor(1+4*Math.random())}
}).
table('content', {
header:1,
table: {border:1, id: "lotto"},
td: function(i,j,v){
if (j===3){
return {class: 'red',
id: 'cell'+i+j};
} else {
return {class: 'normal',
id: 'cell'+i+j};
}
}
}).finalize()
);
$('#start').click();
});
Classes are set, I set a CSS pink background for .red in the Fiddle, and it seems to work like Sushanth's table but the dynamically generated source won't show up for you as 'view frame source' in the fiddle.
To extend this example further, one might save the random table in sessionStorage and then have various buttons which perform operations (re-randomize, submit solution to puzzle, etc.) by grabbing the data out of sessionStorage with CSV.begin, then doing something with it in a .call. and then saving it again and displaying it.
Upvotes: 0
Farhad
Reputation: 752
It easy to rename cells id to cell1,cell2,cell3,cell4,cell5 ... And in every iteration you have to edit 4 Columns not one
Script
<script>
var random1, random2, random3, random4;
var randomArray = [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() * 4 + 1);
}
}
//create table
function UpdateTable() {
CreateLottoValues();
for (var i = 0; i < randomArray.length; i++) {
tmp1 = 'cell' + (i * 4 + 1);
tmp2 = 'cell' + (i * 4 + 2);
tmp3 = 'cell' + (i * 4 + 3);
tmp4 = 'cell' + (i * 4 + 4);
document.getElementById(tmp1).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp2).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp3).innerHTML = Math.floor(Math.random() * 4 + 1);;
document.getElementById(tmp4).innerHTML = Math.floor(Math.random() * 4 + 1);;
}
}
</script>
HTML
<body onload="UpdateTable();">
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tr class="tr1">
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr class="tr2">
<td class="normal" id="cell5"> </td>
<td class="normal" id="cell6"> </td>
<td class="normal" id="cell7"> </td>
<td class="red" id="cell8"> </td>
</tr>
<tr class="tr3">
<td class="normal" id="cell9"> </td>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="red" id="cell12"> </td>
</tr>
<tr class="tr4">
<td class="normal" id="cell13"> </td>
<td class="normal" id="cell14"> </td>
<td class="normal" id="cell15"> </td>
<td class="red" id="cell16"> </td>
</tr>
</table>
</div>
</div>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
</center>
</body>
Upvotes: 0
Sushanth --
Reputation: 55750
Make sure you have unique Id in your HTML.
Also avoid using inline events. Bind the events using javascript which is much cleaner and separates your concerns.
HTML
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tbody>
<tr>
<td class="normal" id="cell00"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers" />
</center>
JS
var btn = document.getElementById('btn');
btn.addEventListener('click', UpdateTable);
// Set the max length of random number
// and the max length
var maxLength = 4;
// You don't require an empty array here
// to populate the list of random numbers.
// Returns a random number
function CreateLottoValues() {
return Math.floor(Math.random() * 4 + 1);
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxLength; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateLottoValues();
}
}
}
UpdateTable();
Check Demo
Upvotes: 1
Related Questions
- How to give each cell random digit number
- How can I populate matrix array with different random numbers
- What is the best way to create a HTML table with random numbers
- How to create grid and place elements randomly inside column?
- Javascript random generation
- Assigning Random Values to Each of the Cells in a Row
- Randomize table cells
- Making a table with random colored numbers
- random numbers in each div
- Generate random list of unique rows, columns javascript