Estoy tratando de entender por qué mi código no funciona como se esperaba. Este código que estoy ejecutando en un fragmento en el navegador:
function generateMaze(n) { // let n = document.getElementById("maze-size").value; let maze = []; for (let i = 0; i < n; i++) { let mazeWidth = new Array(n) .fill(1) .map((x) => (Math.random() >= 0.3 ? 1 : 0)); maze.push(mazeWidth); } console.log(maze); } console.log(generateMaze(5))En la página web tengo el html: Lo único que difiere aquí es que hay estas 2 líneas arriba de la función para obtener el valor y pasarlo a la función. Incluiré el index.js completo al final
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="styles.css" /> <title></title> </head> <body> <div> <label htmlFor="maze-size">Input desired Maze Size</label> <input id="maze-size" name="mazesize" type="text" /> <button id="generateMaze"> <p id="mazearea"></p> Generate </button> </div> </body> <script src="index.js"></script> </html>índice.js
"use strict"; const button = document.getElementById("generateMaze"); button.addEventListener("click", generateMaze); function generateMaze() { let n = document.getElementById("maze-size").value; let maze = []; for (let i = 0; i < n; i++) { let mazeWidth = new Array(n) .fill(1) .map((x) => (Math.random() >= 0.3 ? 1 : 0)); maze.push(mazeWidth); } }El resumen es: esto funciona perfectamente como una función independiente que genera una matriz 2d con la entrada definida:
p.ej:
[ [0, 0, 1, 1, 1], [1, 1, 1, 1, 1], [1, 1, 1, 1, 0], [1, 1, 0, 1, 1], [0, 0, 1, 1, 1], ]pero cuando uso esta función adjunta a un botón, obtengo una salida de solo 1 elemento en n número de matrices y no entiendo por qué.
Gracias de antemano por cualquier ayuda que pueda proporcionar.