Me gustaría que una imagen apareciera x número de veces en filas y columnas. Entonces, si estoy creando un juego de multiplicación y la pregunta es "¿Cuánto es 9 x 5?", ¿Cómo me aseguro de que mi foto de 200x200 aparezca 45 veces en 9 columnas y 5 filas usando Vanilla JS? Me imagino que necesito hacer una tabla, pero no sé cómo hacerlo en función de cuáles son los dos números.
let one = Math.floor(Math.random() * 9) + 1; let two = Math.floor(Math.random() * 9) + 1; let photos = document.getElementById('photos'); let product = one * two; let productNum = parseInt(product); const img = new Image(); const imgSrc = x.jpg; function generateImage() { const img = document.createElement('img') img.src = imgSrc; return img; } for (let i = 0; i < productNum; i++ ) { photos.appendChild(generateImage()); }Podrías crear una función como esta:
function createTable(w, h, src) { let table = document.createElement('table'); for(let i = 0; i < h; ++i) { let row = table.insertRow(); for(let j = 0; j < w; ++j) { let td = row.insertCell(); let img = document.createElement('img'); img.setAttribute('src', src); td.appendChild(img); } } document.getElementById('photos').appendChild(table); } createTable(9, 5, 'https://i.imgur.com/DfEE9nm.png'); <html> <body> <div id='photos'></div> </body> </html>La forma más fácil probablemente sería crear un div para cada fila y agregar imágenes a cada fila para formar las columnas.
let one = Math.floor(Math.random() * 9) + 1; let two = Math.floor(Math.random() * 9) + 1; let photos = document.getElementById("photos"); let product = one * two; let productNum = parseInt(product); const imgSrc = "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"; function generateImage() { const img = document.createElement("img"); img.src = imgSrc; return img; } const rows = one; const columns = two; for (let i = 0; i < rows; i++) { const rowDiv = document.createElement("div"); for (let j = 0; j < columns; j++) { rowDiv.appendChild(generateImage()); } photos.appendChild(rowDiv); } <div id="photos"></div>