0
141
ViewsJavascript actualiza las clases HTML antes de lo esperado
El problema
Estoy haciendo Pacman y escribí la siguiente función para inicializar el tablero . ¿Cómo es posible que se represente el tablero, aunque solo agregue las clases de estilo a los elementos cuadrados en mi matriz de 'cuadrados'? Por lo que puedo ver, nunca actualicé las clases de los elementos div dentro de mi 'cuadrícula' (que contiene los elementos html div reales que se muestran al usuario).
La función
function createBoard() { for (let i = 0; i < layout.length; i++) { const square = document.createElement('div') grid.appendChild(square) squares.push(square) if (layout[i] === 0) { squares[i].classList.add('pac-dot') } else if (layout[i] === 1) { squares[i].classList.add('wall') } else if (layout[i] === 3) { squares[i].classList.add('power-pellet') } } }La función itera a través de una matriz (diseño) que contiene información sobre cómo debería verse el tablero. Para cada elemento de esa matriz , se crea un div (cuadrado) que luego se agrega a la 'cuadrícula' (un elemento div en mi archivo html que contiene todos los divs recién creados). Luego, el div cuadrado se agrega a la matriz 'squares', que también contiene todos los divs cuadrados, pero no está presente en mi archivo html.
La segunda parte de la función agrega una clase al cuadrado en la matriz de cuadrados, en función de cómo debería verse el tablero. El resultado es el siguiente tablero:
1 answers
Answer question0
Suponiendo grid es un elemento DOM, entonces grid.appendChild(square) agregará el cuadrado al DOM. Después de eso, cualquier cambio que aplique al estilo del elemento será visible.
Entonces, por ejemplo, supongamos que tiene el siguiente HTML:
<div id="grid"></div> Ahora vamos a agregarle un div secundario:
const grid = document.getElementById("grid"); const square = document.createElement("div"); grid.appendChild(square);Esto en realidad cambia el HTML, para que sea como si estuviera escrito así:
<div id="grid"> <div></div> </div>Agregar una clase al div también cambiará el marcado. Así que después de esto:
square.classList.add('wall');El HTML se verá así:
<div id="grid"> <div class="wall"></div> </div>