Lo siento si esta es una pregunta repetida y me gustaría un poco de ayuda porque soy un novato. Creé una cuadrícula. Pero cada vez que ingreso un número diferente, usa una cantidad total diferente de píxeles. Quiero que la altura y el ancho del cuerpo que contiene la cuadrícula permanezcan exactamente del mismo tamaño sin importar el número de cuadrícula.
https://moonsol124.github.io/ETCH-A-SKETCH-TOP-PROJECT-/
aquí está lo que hice.
Java:
function createGrid(maxGrid = 16) { for (let i = 0; i < maxGrid; i++) { const divRow = document.createElement('div'); divRow.classList.add('div-row'); for (let j = 0; j < maxGrid; j++) { const div = document.createElement('div'); div.classList.add('div-style'); divRow.appendChild(div); } body.appendChild(divRow); } addColorOnGrid();}
CSS:
.div-row { display: flex; flex-direction: column; } .div-style { width: 25px; height: 25px; flex: 1 1 auto; background-color: RGB(0, 0, 0); border: solid 3px RGB(255, 255, 255); }html:
<body> <div class="btn-group"> <button class="btn" id="grid-button">Enter number of grid</button> <button class="btn" id="reset-button">Reset</button> </div> <div class="grid-body"> </div> </body>por favor dígame si mi enfoque es incorrecto. Gracias por su ayuda.
Creo que esto te ayudará a resolver tu problema. Solo agrego estas partes.
divRow.appendChild(document.createElement("div")); document.getElementById('ac').appendChild(divRow);accede al elemento principal y crea div dentro de ese elemento
Y puede pasar cualquier número aquí para probar onLoad="createGrid(6)"
function createGrid(maxGrid) { for (let i = 0; i < maxGrid; i++) { const divRow = document.createElement("div"); divRow.classList.add('div-row'); for (let j = 0; j < maxGrid; j++) { const div = document.createElement('div'); div.classList.add('div-style'); divRow.appendChild(div); } divRow.appendChild(document.createElement("div")); document.getElementById('ac').appendChild(divRow); } } function popup() { let val = prompt("Please enter value here"); const div = document.getElementsByClassName("div-style"); for(i = 0; div.length > 0; i++){ div[0].remove() } this.createGrid(parseInt(val)); } .grid-body { display: flex; flex-direction: row; } .div-style { width: 25px; height: 25px; flex: 1 1 auto; background-color: RGB(0, 0, 0); border: solid 3px RGB(255, 255, 255); } <body onLoad="createGrid(6)"> <div class="btn-group"> <button class="btn" id="grid-button" onClick="popup()">Enter number of grid</button> <button class="btn" id="reset-button">Reset</button> </div> <div class="grid-body" id="ac"> </div> </body>