更改 innerHTML 会不必要地影响 div 尺寸

Question

So I was writing this basic tictactoe game, and in the process I've made a grid using a container (display:flex) and 9 elements with class of 'cell' inside them. Now I want to update the innerHTML of the div that gets clicked. But when I do so, the size of the div gets a little larger. I've seen other people ask this question before in here too, like this Div element moves when changing the innerHTML . They all suggest using vertical-align: top/bottom; to the main container.

I've tried doing this but that doesn't seem to work, in my case. When all the divs are filled up with text, the dimensions go back to normal again. SO it's definitely a problem with empty divs only . Any help?

 function game(e) { const local = document.getElementById(`${e.id}`); local.innerHTML = 'X'; console.log(e.id); }

 body { margin: 0; padding: 0; } #container { width: 420px; height: 420px; display: flex; flex-wrap: wrap; background: pink; margin-top: 20px; margin-left: 20%; vertical-align: top; }.cell { flex: 1; margin: 6px; min-width: 30%; max-height: 30%; background: white; }

 <div id='container'> <div id='1' class='cell' onClick='game(this)'></div> <div id='2' class='cell' onClick='game(this)'></div> <div id='3' class='cell' onClick='game(this)'></div> <div id='4' class='cell' onClick='game(this)'></div> <div id='5' class='cell' onClick='game(this)'></div> <div id='6' class='cell' onClick='game(this)'></div> <div id='7' class='cell' onClick='game(this)'></div> <div id='8' class='cell' onClick='game(this)'></div> <div id='9' class='cell' onClick='game(this)'></div> </div>

I also tried adding a wide space to all the elements just so that they aren't empty anymore.

for(let i=1; i<10;i++)
  document.getElementById(`${i}`).innerHTML=' ';

That didn't help either, and moreover I don't exactly prefer using this even if it would have worked. Looking for a seamless solution.

Note: I've been doing html and javascript for 2 months only, so not exactly superior with coding and/or syntax. Any criticism would be helpful.

Answer 1

Here you don't need your cells to change size, you want them to be 30% of the grid (in height and width) all the time.

Just use width and height instead of max-width and min-width .

And remove flex: 1;

 function game(e) { const local = document.getElementById(`${e.id}`); local.innerHTML = 'X'; console.log(e.id); }

 body { margin: 0; padding: 0; } #container { width: 420px; height: 420px; display: flex; flex-wrap: wrap; background: pink; margin-top: 20px; margin-left: 20%; vertical-align: top; }.cell { margin: 6px; width: 30%; height: 30%; background: white; }

 <div id="container"> <div id="1" class="cell" onClick="game(this)"></div> <div id="2" class="cell" onClick="game(this)"></div> <div id="3" class="cell" onClick="game(this)"></div> <div id="4" class="cell" onClick="game(this)"></div> <div id="5" class="cell" onClick="game(this)"></div> <div id="6" class="cell" onClick="game(this)"></div> <div id="7" class="cell" onClick="game(this)"></div> <div id="8" class="cell" onClick="game(this)"></div> <div id="9" class="cell" onClick="game(this)"></div> </div>

Answer 2

One possible fix would be to put in a   in each at the start

 function game(e) { const local = document.getElementById(`${e.id}`); local.innerHTML = 'X'; console.log(e.id); }

 body { margin: 0; padding: 0; } #container { width: 420px; height: 420px; display: flex; flex-wrap: wrap; background: pink; margin-top: 20px; margin-left: 20%; vertical-align: top; }.cell { flex: 1; margin: 6px; min-width: 30%; max-height: 30%; background: white; }

 <div id='container'> <div id='1' class='cell' onClick='game(this)'>&nbsp;</div> <div id='2' class='cell' onClick='game(this)'>&nbsp;</div> <div id='3' class='cell' onClick='game(this)'>&nbsp;</div> <div id='4' class='cell' onClick='game(this)'>&nbsp;</div> <div id='5' class='cell' onClick='game(this)'>&nbsp;</div> <div id='6' class='cell' onClick='game(this)'>&nbsp;</div> <div id='7' class='cell' onClick='game(this)'>&nbsp;</div> <div id='8' class='cell' onClick='game(this)'>&nbsp;</div> <div id='9' class='cell' onClick='game(this)'>&nbsp;</div> </div>

Since you are using a "grid" you can also use css grid , visually you can set the sizes as you wish here but this is an example of that:

 const rootElement = document.getElementById('container'); const containerChars = JSON.parse(rootElement.dataset.chars); const cells = rootElement.getElementsByClassName('cell'); function game() { let c = rootElement.dataset.charLast == containerChars[0]? containerChars[1]: containerChars[0]; rootElement.dataset.charLast = c; this.innerHTML = c; } for (let i = 0; i < cells.length; i++) { cells[i].onclick = game; }

 body { margin: 0; padding: 0; } #container { border: solid 2px #dddddd; display: grid; grid-template-columns: repeat(3, minmax(2em, 1fr)); grid-template-rows: repeat(3, minmax(2em, 1fr)); background: #FFCCDD; grid-gap: 0.25rem; }.cell { background: #ddEEFF; display: flex; justify-content: center; align-items: center; font-size: 1.75em; }

 <div id='container' data-char-last="X" data-chars='["X","O"]'> <div id='1' class='cell'></div> <div id='2' class='cell'></div> <div id='3' class='cell'></div> <div id='4' class='cell'></div> <div id='5' class='cell'></div> <div id='6' class='cell'></div> <div id='7' class='cell'></div> <div id='8' class='cell'></div> <div id='9' class='cell'></div> </div>

Answer 3

Your problem css. Try...

.cell {
    /* flex: 1; */
    /* margin: 6px; */
    min-width: 32.9%;
    /* max-height: 30%; */
    background: white;
    border: 1px solid;
    height: 32.9%;
}

Answer 4

try adding this line to your css:

* {
    box-sizing: border-box;
}