Estoy tratando de crear un juego simple de grabar un boceto. Comencé creando una función que debería inyectar un no. de divs en la página html pero cuando lo hace. no parece inyectarlo por alguna razón.
let container = document.getElementById('container'); function getGrid(gridNumber) { for (let i = 0; i <= gridNumber * gridNumber; i++) { const row = document.createElement('div'); row.style.border = '1px solid red' container.appendChild(row).classList.add('box'); } } getGrid(16); <!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"> <title>Etch-a-Sketch</title> <link rel = "stylesheet" href="style.css"> <script src="app.js"> </script> </head> <body> <div class="banner"> <div class="banner-text"> <h1> Etch-a-Sketch </h1> </div> </div> <div id="container"> </div> </body> </html>O haces document.getElementById o document.querySelector , no ambos.
let container = document.getElementById('container'); function getGrid(gridNumber) { for (let i = 0; i <= gridNumber * gridNumber; i++) { const row = document.createElement('div'); row.style.border = '1px solid red' container.appendChild(row).classList.add('box'); } } getGrid(16); <div id="container"></div>