0
130
VistasBloquear cambios de posición después de cambiar innerHTML
Estoy tratando de hacer un juego XO, así que html es este:
const blocks = document.querySelectorAll(".block") let turn = "X" for (let i = 0; i < blocks.length; i++) { blocks[i].addEventListener("click", function () { if (this.innerHTML == "") { this.innerHTML = turn }} )} .block { width: 100px; height: 100px; border: 1px solid black; text-align: center; line-height: 100px; font-size: 50px; font-weight: bold; cursor: pointer; padding: 0; display: inline-block; } #game{ max-width: 400px; max-height: 400px; } <div id="game"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> Y todo está bien. Pero cuando presiono un bloque, su posición cambia un poco: 
2 Respuestas
Responde la pregunta0
Tengo una solución ligeramente diferente usando estructura de filas y columnas y flex.
Divida la estructura en una estructura tabular (por ejemplo, fila, columna). Intente usar display:flex para mostrar los cuadros en la misma línea.
const blocks = document.querySelectorAll(".col"); let turn = "X"; for (let i = 0; i < blocks.length; i++) { blocks[i].addEventListener("click", function () { if (this.innerHTML == "") { this.innerHTML = turn; } }); } .row{ display: flex; } .col { width: 100px; height: 100px; border: 1px solid black; text-align: center; line-height: 100px; font-size: 50px; font-weight: bold; cursor: pointer; padding: 0; } #game { max-width: 400px; max-height: 400px; } <div id="game"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div>0
En lugar de usar inline-block para sus bloques, podría usar un contenedor flexible ( display: flex ) y envuelto ( flex-wrap: wrap ) con ancho y alto fijos para su #game div.
El uso flex-wrap le evita dividir manualmente sus filas.
display: flex, por defecto, estableceflex-directionenrow.
Usandoflex-wrap: wrap, si el contenido excede horizontalmente el ancho del contenedor, se envuelve.
En nuestro caso, el contenedor tiene una dimensión de 400
400px, por lo que obtendremos 3 elementos por fila (ya que cada bloque tiene unwidth: 100pxde 100 px).
Como en este ejemplo ejecutable
const blocks = document.querySelectorAll(".block") let turn = "X" for (let i = 0; i < blocks.length; i++) { blocks[i].addEventListener("click", function() { if (this.innerHTML == "") { this.innerHTML = turn } }) } #game { /* Flex Wrapped Container*/ display: flex; justify-content: start; align-items: center; flex-wrap: wrap; /* Dimensions */ max-width: 400px; max-height: 400px; } .block { width: 100px; height: 100px; border: 1px solid black; margin: 1px; /* margin for some gap between boxes */ text-align: center; line-height: 100px; font-size: 50px; font-weight: bold; cursor: pointer; padding: 0; display: inline-block; vertical-align: center; } <div id="game"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>