All geek questions in one place

How to assign random values ​​from an array to a table cell by clicking a button

I want to implement code to create a bingo application where it takes letters from an array with the click of a button.

How can I assign an element of an array, such as array (a, b, c), to these cells of a 3X3 table randomly when I press the start button. when i got the sequence as abc in line or diagonal, i want to increase count value.

I started, but I can not implement the code. Can I get any suggestion please.

Here is my code

<html>
    <head>
    <script>
    function run(){ 
    var grid = document.getElementById("grid");
     for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = rand();    
        row.cells[1].textContent = rand();
        row.cells[2].textContent = rand();
     }
score()
    }
    function rand(){
var text = new Array();
var possible = "MCS*";
    return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
    </script>
    </head>
    <body>
    <form metdod="post">

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
    <tr>
      <td id="1-1" height="19" width="20%">&nbsp;</td>
      <td id="1-2" height="19" width="20%">&nbsp;</td>
      <td id="1-3" height="19" width="20%">&nbsp;</td>
    </tr>
    <tr>
      <td id="2-1" height="16" width="20%">&nbsp;</td>
      <td id="2-2" height="16" width="20%">&nbsp;</td>
      <td id="2-3" height="16" width="20%">&nbsp;</td>

      </tr>
      <tr>
      <td id="3-1" height="19" width="20%">&nbsp;</td>
      <td id="3-2" height="19" width="20%">&nbsp;</td>
      <td id="3-3" height="19" width="20%">&nbsp;</td>
      </tr>
      </table>

      <br><br>

      <input type="button" onClick="return run();" value="run">
      </form>
      </body>
      </html>

Thanks in advance.

+4
source share
3 answers
<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){ 
    var counter =0;
    var grid = document.getElementById("grid");
    for (var i = 0, row; row = grid.rows[i]; i++){
        row.cells[0].textContent = arr_num[getRandom()];    
        row.cells[1].textContent = arr_num[getRandom()];
        row.cells[2].textContent = arr_num[getRandom()];
    }
    var a = getMatch();
    for(var i=0;i<getMatch().length; i++){
        if(match.indexOf(a[i]) > -1)
            counter++;
    }
    document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
    var grid = document.getElementById("grid");
    var match1 = [[]];
    var match_dia =[];
    var temp_dia1 = 0;
    var temp_dia2 = 2;
    var temp_dia3 = 0;
    var temp_dia4 = 2;
    var match_col = [];
    for (var i = 0, row; row = grid.rows[i]; i++){
        match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
        match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
        if(match_col.length != 0){
            match_col[0] = match_col[0]+row.cells[0].textContent;
            match_col[1] = match_col[1]+row.cells[1].textContent;
            match_col[2] = match_col[2]+row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent+match_col[3];
            match_col[4] = row.cells[1].textContent+match_col[4];
            match_col[5] = row.cells[2].textContent+match_col[5];
        }else{
            match_col[0] = row.cells[0].textContent;
            match_col[1] = row.cells[1].textContent;
            match_col[2] = row.cells[2].textContent;
            match_col[3] = row.cells[0].textContent;
            match_col[4] = row.cells[1].textContent;
            match_col[5] = row.cells[2].textContent;
        }
        if(match_dia.length != 0){
            match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
            match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
            match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
        }else{
            match_dia[0] = row.cells[temp_dia1++].textContent;
            match_dia[1] = row.cells[temp_dia2--].textContent;
            match_dia[2] = row.cells[temp_dia3++].textContent;
            match_dia[3] = row.cells[temp_dia4--].textContent;
        }
    }
    for(var i=0;i<match_col.length;i++){
        match1[match1.length++] = match_col[i];
    }
    match1[match1.length++] = match_dia[0];
    match1[match1.length++] = match_dia[1];
    return match1;
}
function getRandom(){
    return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
    <td id="1-1" height="19" width="20%">&nbsp;</td>
    <td id="1-2" height="19" width="20%">&nbsp;</td>
    <td id="1-3" height="19" width="20%">&nbsp;</td>
</tr>
<tr>
    <td id="2-1" height="16" width="20%">&nbsp;</td>
    <td id="2-2" height="16" width="20%">&nbsp;</td>
    <td id="2-3" height="16" width="20%">&nbsp;</td>

</tr>
<tr>
    <td id="3-1" height="19" width="20%">&nbsp;</td>
    <td id="3-2" height="19" width="20%">&nbsp;</td>
    <td id="3-3" height="19" width="20%">&nbsp;</td>
</tr>
</table>

<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
+1
source

Here's how you assigned a value to each cell:

for(var row = 1; row <= 3; row++) {
    for(var col = 1; col <= 3; col++ {

        var id = '#'+ row + "-" + col;
        $(id).html(/* put some content here */);
    }
}

, . Math.random(). 10 , 0 9. .

Edit

, letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ] n, letters[n] n. n == 2: letters[n] == "CD"

+1

, , " a, b, c " :

var bingocol = ["a", "b", "c"];
/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
  var nextcolindex = getRandomIntInclusive(0, 2);
  var nextletterindex = getRandomIntInclusive(0, 2);
  var nextrow =  getRandomIntInclusive(0, 2);
  $('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});

, BINGO, , , ; , , - "" , , - , .

Here is the above code in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/

0
source

Source: https://habr.com/ru/post/1626514/

More articles:


All Articles