Estoy tratando de crear una cuadrícula de una entrada específica de alto/ancho. Si codifico el alto y el ancho en el lienzo de abajo (10 y 5 en este caso) funciona perfectamente

 const canvasWindow = document.getElementById("canvas-window") const height = document.getElementById("height") const width = document.getElementById("width") const generateCanvasBtn = document.getElementById("generate-canvas-btn") generateCanvasBtn.addEventListener("click", () => { const canvas = new Canvas(document.getElementById("canvas-window"), 10, 5); canvas.generateCanvas(); })

Sin embargo, este ejemplo se rompe:

 const canvasWindow = document.getElementById("canvas-window") const height = document.getElementById("height") const width = document.getElementById("width") const generateCanvasBtn = document.getElementById("generate-canvas-btn") generateCanvasBtn.addEventListener("click", () => { const canvas = new Canvas(document.getElementById("canvas-window"), height.value, width.value); canvas.generateCanvas(); })

¿Alguna idea de que puede estar causando esto? Si registro height.value y width.value, obtiene los valores correctamente, por lo que me cuesta ver en qué se diferencia de estar codificado si los valores se leen correctamente. El error que estoy recibiendo es:

canvas.js:18 TypeError no detectado: no se pueden establecer propiedades de undefined (estableciendo '0') en Canvas.generateCanvas (canvas.js:18:33) en HTMLInputElement. (pixelcreator.js:8:12)

Aquí hay un código que contiene la línea a la que hace referencia el error:

 class Canvas { grid; constructor(window, height, width) { this.window = window; this.height = height; this.width = width; } generateCanvas() { this.grid = new Array(this.height).fill(0).map(() => new Array(this.width).fill(0)); for (let i = 0; i < this.height; i++) { const row = document.createElement("div"); row.classList.add('row'); this.window.appendChild(row); for (let j = 0; j < this.width; j++) { this.grid[i][j] = new Cell(row) // this is line 18 from the error this.grid[i][j].createCell(); } } }