Tips for assigning a random numerical value to each cell

Question

Tips for assigning a random numerical value to each cell

I am struggling to assign each cell a random double-digit number between 50 and 500. I have been attempting to use the Math.floor(Math.random()) function but have not had any success so far.

Additionally, I am trying to figure out how to target only one cell. For example, if I have a grid of 5x5 slots with 5 rows and 5 columns, how can I isolate the top left cell? Instead of a randomly generated number like the rest of the cells, I want to give it a specific symbol that I can control. That way, if the symbol is in the top left corner and I click on another cell, I can move the symbol there, replacing the generated number and leaving the top left corner empty.

I apologize for the inconvenience, any assistance would be greatly appreciated.

<html>
<head>
<style>
td{
border:2px solid black;
width:10px;
height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
background-color:green;
color:white;
}
</style>

<body>
<div id='ff'></div>

<script>
var isCol=0;
var board=[];
for(r=0;r<7;r++){
    var line=[];
    for(c=0;c<7;c++){
        line.push(r);
    }
    board.push(line);
}


function prs(c,r){
    showTable(c,r);
    isCol=(isCol+1)%2;
}

function toColor(col,row,chosen_col,chosen_row){
var ret=false;
switch(isCol){
    case 0:
        if(row==chosen_row){
            ret=true;
        }
        break;
    case 1:
        if(col==chosen_col){
            ret=true;
        }
        break;
}

return ret;
}

function showTable(chosen_col,chosen_row){
var str="";
str+="<table border=1>";
for(row=0;row<7;row++){
    str+="<tr>";
    for(col=0;col<7;col++){ 
        str+="<td onclick='prs("+col+","+row+")'";
        if(toColor(col,row,chosen_col,chosen_row)){
            str+=" class='grn' ";
        }
        str+=">";
str+=board[row][col];
        str+="</td>";
    }
    str+="</tr>";
}
str+="</table>";

 document.getElementById("ff").innerHTML=str;
}


showTable(-1);
</script>
</body>
</html>

javascript html css

Answer 1

Answer №1

Give this a shot.

function generateRandomRange(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

const num_rows = 7;
const num_cols = 7;

const matrix = Array.from(new Array(num_rows), () =>
  new Array(num_cols).fill(0).map(() => generateRandomRange(50, 500))
);

console.log(matrix);

Answer 2

Give this a shot.

function generateRandomRange(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

const num_rows = 7;
const num_cols = 7;

const matrix = Array.from(new Array(num_rows), () =>
  new Array(num_cols).fill(0).map(() => generateRandomRange(50, 500))
);

console.log(matrix);

Answer 3

Answer №2

It has come to my attention that you are utilizing isCol as a toggle each time a cell is clicked. Rather than using addition and modulus, consider using a boolean variable.

let isCol = false;

function prs(...) {
    showTable(...);
    isCol = !isCol;
}

This approach will simplify your toColor statement.

if (isCol) {
    return row === chosen_row;
} else {
    return col === chosen_col;
}

Answer 4

It has come to my attention that you are utilizing isCol as a toggle each time a cell is clicked. Rather than using addition and modulus, consider using a boolean variable.

let isCol = false;

function prs(...) {
    showTable(...);
    isCol = !isCol;
}

This approach will simplify your toColor statement.

if (isCol) {
    return row === chosen_row;
} else {
    return col === chosen_col;
}

Answer 5

Answer №3

Aside from seeking help on Stack Overflow for generating random numbers within a range...
It seems like you may be overcomplicating the code. Here's an alternative approach:

const size = 5;
const rand = (min, max) => ~~(Math.random() * (max - min) + min);
let tdEmpty = null;            

const moveValue = evt => {
  const text = evt.target.textContent;
  if (!text) return;
  tdEmpty.textContent = text;  
  evt.target.textContent = ''; 
  tdEmpty = evt.target;        
};

const newTD = TR => {
  const td = TR.insertCell();
  const text = tdEmpty ? rand(50, 501) : ""; 
  td.appendChild(document.createTextNode(text));
  td.addEventListener('click', moveValue); 
  if (!tdEmpty) tdEmpty = td;             
};

const newTR = TABLE => {
  const tr = TABLE.insertRow();
  for (let i=0; i<size; i++) newTD(tr);
};

const table = document.createElement('table');
for (let i=0; i<size; i++) newTR(table);

document.querySelector('#ff').appendChild(table);

td { border: 2px solid black; }
td:hover { background-color: lightgreen; }

<div id='ff'></div>

Related resources:

Inserting Rows in HTML Tables
Inserting Cells in HTML Tables
Creating Text Nodes in HTML Documents
How to Generate Random Numbers in a Specific Range using JavaScript?

Answer 6

Aside from seeking help on Stack Overflow for generating random numbers within a range...
It seems like you may be overcomplicating the code. Here's an alternative approach:

const size = 5;
const rand = (min, max) => ~~(Math.random() * (max - min) + min);
let tdEmpty = null;            

const moveValue = evt => {
  const text = evt.target.textContent;
  if (!text) return;
  tdEmpty.textContent = text;  
  evt.target.textContent = ''; 
  tdEmpty = evt.target;        
};

const newTD = TR => {
  const td = TR.insertCell();
  const text = tdEmpty ? rand(50, 501) : ""; 
  td.appendChild(document.createTextNode(text));
  td.addEventListener('click', moveValue); 
  if (!tdEmpty) tdEmpty = td;             
};

const newTR = TABLE => {
  const tr = TABLE.insertRow();
  for (let i=0; i<size; i++) newTD(tr);
};

const table = document.createElement('table');
for (let i=0; i<size; i++) newTR(table);

document.querySelector('#ff').appendChild(table);

td { border: 2px solid black; }
td:hover { background-color: lightgreen; }

<div id='ff'></div>

Related resources:

Inserting Rows in HTML Tables
Inserting Cells in HTML Tables
Creating Text Nodes in HTML Documents
How to Generate Random Numbers in a Specific Range using JavaScript?

Answer 7

Answer №4

Hopefully, my understanding is precise.

Ensure to consider

Math.floor(Math.random() * (MAX - MIN + 1)) + MIN

, do not overlook the significance of "+ 1". Without this addition, attaining 500 will remain unachievable (499 acts as the maximum value, a fact I aim to highlight in my comments).

Moreover, rather than establishing a single callback for each cell, it would be more efficient to create a unified callback for the "click" event on the table. Subsequently, you can determine the element where the event occurred. I encourage you to delve into information regarding Event Bubbling and Propagation in JavaScript. It perfectly aligns with your current objective.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        td{
            border:2px solid black;
            width:10px;
            height:10px;
        }

        td:hover{
            background-color:lightgreen;
        }

        .grn {
            background-color:green;
            color:white;
        }
    </style>
</head>
<body>
    <div id="ff"></div>
    <script>
        'use strict';

        const SIZE = 10;        // Size of the table (SIZE x SIZE)
        const MIN = 50;         // Minimal number in cell
        const MAX = 500;        // Maximum number in cell
        const CHOSEN_COL = 0;   // Column where chosen cell is
        const CHOSEN_ROW = 0;   // Row where chosen cell is
        const SYMBOL = 'S';     // Yours 'symbol'

        function showTable() {
            let table = document.createElement('table');
            let chosenTd;   // <td> element of chosen cell

            for (let i = 0; i < SIZE; i++) {
                let tr = document.createElement('tr');
                for (let j = 0; j < SIZE; j++) {
                    let td = document.createElement('td');

                    // 1) Math.random() returns values from 0 (inclusive) to 1 (exclusive)
                    // 2) Math.random() * (MAX - MIN) returns values from 0 (inclusive)
                    // to (MAX - MIN) (exclusive)
                    // 3) Math.random() * (MAX - MIN + 1) returns values from 0 (inclusive)
                    // to (MAX - MIN + 1) (exclusive)
                    // 4) Math.floor(Math.random() * (MAX - MIN + 1)) returns values from 0 (inclusive)
                    // to (MAX - MIN) (inclusive!!!)
                    // 5) Math.floor(Math.random() * (MAX - MIN + 1)) + MIN returns values from
                    // MIN (inclusive) to MAX (inclusive) - exectly what we need
                    //
                    // Pay attention to 'inclusive' and 'exclusive'
                    td.textContent = Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

                    // Obvious (I hope)
                    if (i == CHOSEN_ROW && j == CHOSEN_COL) {
                        chosenTd = td;
                        chosenTd.className = 'grn';
                        chosenTd.textContent = SYMBOL;
                    }

                    tr.append(td);
                }
                table.append(tr);
            }

            table.onclick = function(e) {
                // If we click not at chosen cell (you call it 'symbol')
                if (e.target != chosenTd) {
                    // Now just free cell where 'symbol' is
                    // And 'move' the 'symbol'

                    e.target.textContent = chosenTd.textContent;

                    chosenTd.className = '';
                    chosenTd.textContent = '';

                    chosenTd = e.target;
                    chosenTd.className = 'grn';
                }
            }

            document.querySelector('#ff').append(table);
        }
    </script>
</body>
</html>

In addition, remember to validate that e.target specifically refers to a cell, rather than a row or the entire table, for instance. Nevertheless, I believe you possess the capability to accomplish this task autonomously.

Answer 8

Hopefully, my understanding is precise.

Ensure to consider

Math.floor(Math.random() * (MAX - MIN + 1)) + MIN

, do not overlook the significance of "+ 1". Without this addition, attaining 500 will remain unachievable (499 acts as the maximum value, a fact I aim to highlight in my comments).

Moreover, rather than establishing a single callback for each cell, it would be more efficient to create a unified callback for the "click" event on the table. Subsequently, you can determine the element where the event occurred. I encourage you to delve into information regarding Event Bubbling and Propagation in JavaScript. It perfectly aligns with your current objective.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        td{
            border:2px solid black;
            width:10px;
            height:10px;
        }

        td:hover{
            background-color:lightgreen;
        }

        .grn {
            background-color:green;
            color:white;
        }
    </style>
</head>
<body>
    <div id="ff"></div>
    <script>
        'use strict';

        const SIZE = 10;        // Size of the table (SIZE x SIZE)
        const MIN = 50;         // Minimal number in cell
        const MAX = 500;        // Maximum number in cell
        const CHOSEN_COL = 0;   // Column where chosen cell is
        const CHOSEN_ROW = 0;   // Row where chosen cell is
        const SYMBOL = 'S';     // Yours 'symbol'

        function showTable() {
            let table = document.createElement('table');
            let chosenTd;   // <td> element of chosen cell

            for (let i = 0; i < SIZE; i++) {
                let tr = document.createElement('tr');
                for (let j = 0; j < SIZE; j++) {
                    let td = document.createElement('td');

                    // 1) Math.random() returns values from 0 (inclusive) to 1 (exclusive)
                    // 2) Math.random() * (MAX - MIN) returns values from 0 (inclusive)
                    // to (MAX - MIN) (exclusive)
                    // 3) Math.random() * (MAX - MIN + 1) returns values from 0 (inclusive)
                    // to (MAX - MIN + 1) (exclusive)
                    // 4) Math.floor(Math.random() * (MAX - MIN + 1)) returns values from 0 (inclusive)
                    // to (MAX - MIN) (inclusive!!!)
                    // 5) Math.floor(Math.random() * (MAX - MIN + 1)) + MIN returns values from
                    // MIN (inclusive) to MAX (inclusive) - exectly what we need
                    //
                    // Pay attention to 'inclusive' and 'exclusive'
                    td.textContent = Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

                    // Obvious (I hope)
                    if (i == CHOSEN_ROW && j == CHOSEN_COL) {
                        chosenTd = td;
                        chosenTd.className = 'grn';
                        chosenTd.textContent = SYMBOL;
                    }

                    tr.append(td);
                }
                table.append(tr);
            }

            table.onclick = function(e) {
                // If we click not at chosen cell (you call it 'symbol')
                if (e.target != chosenTd) {
                    // Now just free cell where 'symbol' is
                    // And 'move' the 'symbol'

                    e.target.textContent = chosenTd.textContent;

                    chosenTd.className = '';
                    chosenTd.textContent = '';

                    chosenTd = e.target;
                    chosenTd.className = 'grn';
                }
            }

            document.querySelector('#ff').append(table);
        }
    </script>
</body>
</html>

In addition, remember to validate that e.target specifically refers to a cell, rather than a row or the entire table, for instance. Nevertheless, I believe you possess the capability to accomplish this task autonomously.

Tips for assigning a random numerical value to each cell

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The incompatible peer dependency of node.js is causing issues with running npm update

How to reset the value in a select box using jQuery

What is the best way to enable a CSS table column to overflow the table while having a width of 100%?

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Troubleshooting problem with Bootstrap column and grid dimensions

Is there a method to divide a table's TD into two interactive segments?

Utilizing Ajax to send a parameter to a separate PHP script

Exploring Ember Octane (version 3.22 and above): benefits of using {{on 'click' this.function}} over traditional onclick={{this.function}} method

The height of the webpage is extended when viewed on mobile Safari

Show label and selection box

Creating a web form with HTML and integrating it with jQuery AJAX

Node.js throws an error when accessing req.body as undefined

react: implement custom context menu on videojs

Show information from a MySql table starting with the most recent entries and ending with

Encountering an error while trying to import GraphQL resolvers and schema

Exploring MongoDB - when we need to peel back nested subdocuments

Continuous front-end promise awaiting response from back-end Node.js function

Discover the following item using jQuery

Troubleshooting Angular and Ionic: Unable to Retrieve Value from HTML Input Element