user2637639
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">&nbsp;</td>
<td class="normal" ><input type="text" name=""></td>
<td class="normal" >&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</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
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
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
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">&nbsp;</td>
                        <td class="normal" id="cell2">&nbsp;</td>
                        <td class="normal" id="cell3">&nbsp;</td>
                        <td class="red" id="cell4">&nbsp;</td>
                    </tr>
                    <tr class="tr2">
                        <td class="normal" id="cell5">&nbsp;</td>
                        <td class="normal" id="cell6">&nbsp;</td>
                        <td class="normal" id="cell7">&nbsp;</td>
                        <td class="red" id="cell8">&nbsp;</td>
                    </tr>
                    <tr class="tr3">
                        <td class="normal" id="cell9">&nbsp;</td>
                        <td class="normal" id="cell10">&nbsp;</td>
                        <td class="normal" id="cell11">&nbsp;</td>
                        <td class="red" id="cell12">&nbsp;</td>
                    </tr>
                    <tr class="tr4">
                        <td class="normal" id="cell13">&nbsp;</td>
                        <td class="normal" id="cell14">&nbsp;</td>
                        <td class="normal" id="cell15">&nbsp;</td>
                        <td class="red" id="cell16">&nbsp;</td>
                    </tr>
                </table>
            </div>
        </div>
        <input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
    </center>
</body>

Upvotes: 0

Sushanth --
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">&nbsp;</td>
                        <td class="normal" id="cell01">&nbsp;</td>
                        <td class="normal" id="cell02">&nbsp;</td>
                        <td class="red" id="cell03">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell10">&nbsp;</td>
                        <td class="normal" id="cell11">&nbsp;</td>
                        <td class="normal" id="cell12">&nbsp;</td>
                        <td class="red" id="cell13">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell20">&nbsp;</td>
                        <td class="normal" id="cell21">&nbsp;</td>
                        <td class="normal" id="cell22">&nbsp;</td>
                        <td class="red" id="cell23">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell30">&nbsp;</td>
                        <td class="normal" id="cell31">&nbsp;</td>
                        <td class="normal" id="cell32">&nbsp;</td>
                        <td class="red" id="cell33">&nbsp;</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