Necesito representar una tabla en el HTML con 16 celdas que contienen números del 1 al 16 en un orden aleatorio, la pregunta decía que deberías sacar un número de la matriz y no puedo entender cómo hacerlo, tnx por la ayuda :)
aquí está mi código
"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; }Este método logra el objetivo final pero no utiliza array.pop (lo que requeriría la complejidad de una mezcla aleatoria en la matriz (consulte ¿Cómo aleatorizar (reorganizar) una matriz de JavaScript? )
Simplemente itera a través de un bucle anidado para cada fila y columna, eligiendo un elemento aleatorio cada vez, y ese elemento se elimina una vez que se usa. Tenga en cuenta que array.length como multiplicador para el número aleatorio (rango 0-1) se ocupa de que el índice aleatorio siempre haya estado dentro del rango para la matriz de reducción.
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; }