What is the best way to create a table by selecting a number at random from a shuffled array of 16 numbers and then incorporating it into the HTML code

Question

What is the best way to create a table by selecting a number at random from a shuffled array of 16 numbers and then incorporating it into the HTML code

I'm trying to display a table in HTML with 16 cells containing numbers from 1 to 16 in a random order. I am having trouble implementing the part where I need to pop a number from the array. Any help would be greatly appreciated :)

Here's the code I have so far:

"use strict";

let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
let shuffled = shuffleArr(numArr);

function shuffleArr(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  console.log(arr);
  return arr;
}

function renderTable(arr) {
  let strHTML = "";
  for (let i = 0; i < arr.length / 2; i++) {
    strHTML += "<tr>";
    for (let j = 0; j < arr.length / 2; j++) {
      strHTML += `<td></td>`;
    }
    strHTML += "</tr>";
  }

  let elTable = document.querySelector(".board");
  elTable.innerHTML = strHTML;
}

javascript html css

Answer 1

Answer №1

This particular approach achieves the desired outcome without utilizing array.pop (since that would involve implementing a random shuffle on the array). Instead, it simply employs a nested loop for each row and column, selecting a random element each time and then removing it after use. The use of array.length as a multiplier for the random number (ranging from 0-1) ensures that the random index always remains within the valid range as the array shortens.

let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

let rows=4;
let cols=4;

let markup = "";
let randomIndex = 0;

for (let row=0; row<rows; row++) {
  markup += "<tr>"
  for (let col=0; col<cols; col++) {
   randomIndex = Math.floor(Math.random()*numArr.length);
   markup += `<td>${numArr[randomIndex]}</td>`;
   numArr.splice(randomIndex, 1); // removed used value;  
  } // next col;
  markup += "</tr>";
} // next row; 

const table = document.createElement('table');
table.innerHTML = markup;

document.body.appendChild(table);

table, td {
  border: 1px solid black;
  font-family: monospace;
  text-align: right;
}

table {
  border-collapse: collapse;
}

td {
  width: 2em;
}

Answer 2

This particular approach achieves the desired outcome without utilizing array.pop (since that would involve implementing a random shuffle on the array). Instead, it simply employs a nested loop for each row and column, selecting a random element each time and then removing it after use. The use of array.length as a multiplier for the random number (ranging from 0-1) ensures that the random index always remains within the valid range as the array shortens.

let numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

let rows=4;
let cols=4;

let markup = "";
let randomIndex = 0;

for (let row=0; row<rows; row++) {
  markup += "<tr>"
  for (let col=0; col<cols; col++) {
   randomIndex = Math.floor(Math.random()*numArr.length);
   markup += `<td>${numArr[randomIndex]}</td>`;
   numArr.splice(randomIndex, 1); // removed used value;  
  } // next col;
  markup += "</tr>";
} // next row; 

const table = document.createElement('table');
table.innerHTML = markup;

document.body.appendChild(table);

table, td {
  border: 1px solid black;
  font-family: monospace;
  text-align: right;
}

table {
  border-collapse: collapse;
}

td {
  width: 2em;
}

What is the best way to create a table by selecting a number at random from a shuffled array of 16 numbers and then incorporating it into the HTML code

Answer №1

Similar questions

Error: 'require' is undefined in react.production.min.js during production deployment

Effortless navigation between components in React JS with smooth scrolling

javascript / php - modify input fields according to selection change

phpif (the current date is after a certain specific date, do

When using @font-face, Chrome supports it while IE and Firefox do not

Styling React components using class names

Eliminating the admin-bar.php styling in a WordPress theme

Utilizing the 'new' operator in the creation of Mongoose schema structures

Struggling to implement a seamless scrolling effect using CSSTransition Group

Prevent image upload until text is clicked on

Creating a function in AngularJS to select all checkboxes

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

The sliding div unites with the bottom button, rather than the top one

The error message indicates that the Worklight adapter is an object, not a function

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

Guide on toggling the expansion and collapse of antd TreeSelect items when a button is clicked

Display a modal before leaving the page?

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

The Ajax response fails to update my viewmodel

Why isn't margin working with position: fixed?