Estoy aprendiendo a incorporar JavaScript en HTML y estoy tratando de crear un juego web muy simple basado en un proyecto de clase. (Esta es una barra lateral, completé con éxito el proyecto en sí).
Necesito dos imágenes específicas para llenar aleatoriamente toda la tabla. Mi código crea con éxito la matriz de la longitud adecuada y la traduce correctamente al HTML, pero las fuentes de la imagen no parecen completarse correctamente. Siempre aparece una imagen de cada uno, por lo que estoy seguro de que mis rutas de origen son correctas y una de las imágenes siempre está en la esquina inferior derecha, pero el resto del campo está en blanco. Al examinar DevTools, la matriz está allí con los atributos img apropiados, pero no hay una fuente, excepto obviamente en los img que tienen una imagen visible.
class Field { static generateField(h, w, pct = .2) { let board = []; let tempArray = []; while (board.length < h) { while (tempArray.length < w) { const random = Math.random(); if (random < pct) { tempArray.push(imageB); } else { tempArray.push(imageA); } } board.push(tempArray); } for (let a = 0; a < h; a++) { let row = document.createElement("tr"); for (let b = 0; b < w; b++) { let cell = document.createElement("td"); let img = document.createElement("img"); img = board[a][b]; img.style.width = "100%"; img.style.height = "100%"; cell.appendChild(img); row.appendChild(cell); } tblBody[0].appendChild(row); } } } El tblBody se define fuera de la class . Originalmente, mi código estaba anidado for bucles y daba exactamente el mismo resultado.
¿Dónde me estoy equivocando?
Supongo que imageA e imageB son rutas a archivos de imagen. Si es así, tu problema está aquí:
let img = document.createElement("img"); img = board[a][b]; Está asignando un objeto de elemento recién creado a img y luego reasignando una cadena (la ruta a la imagen) a la misma variable.
En su lugar, debe agregar un atributo de origen al elemento img que creó y establecer su valor en la ruta de la imagen:
let img = document.createElement("img"); img.setAttribute("src", "<path to imageB>"); Luego puede agregar el elemento img , completo con su atributo src , a la celda.