Question 345172 in Html Question posted in
Some basic documentation can be found here.

Html – Buttons keep moving down the page every time the content inside them changes CSS

I was trying to make a game of Noughts and Crosses in HTML, Javascript and CSS but every time I pressed on a button to change it’s content, the button jumped down the page. Buttons keep moving down the page every time the content inside them changes CSS. Here is the code:

let grid = ["-", "-", "-", "-", "-", "-", "-", "-", "-"];
let clicked = [true, true, true, true, true, true, true, true, true];
let turn = 'X';
function win(player) {
  document.getElementById('ptu').innerHTML = "Player " + turn + " wins";
  for (var i = 0; i < 9; i++) {
      clicked[i] = false;
  }
}
document.getElementById('ptu').innerHTML = "Turn: X";
    
function change(button, id) {
    if (clicked[id]) {
        document.getElementById(button).innerHTML = turn;
        grid[id] = turn;

        clicked[id] = !clicked[id];
        if (turn == 'X') {
            document.getElementById('ptu').innerHTML = "Turn: O";
        } else {
            document.getElementById('ptu').innerHTML = "Turn: X"
        }

        if (grid[0] == turn && grid[1] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[3] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[6] == turn && grid[7] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[8] == turn && grid[5] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[4] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[2] == turn && grid[4] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[1] == turn && grid[4] == turn && grid[7] == turn) {
            win(turn);
        } else if (grid[3] == turn && grid[4] == turn && grid[5] == turn) {
            win(turn);
        }
        if (turn == 'X') {
            turn = 'O';
        } else {
            turn = 'X';
        }
    }
}
button {
                display: inline-block;
                padding: 10px 20px;
                background-color: #007bff;
                color: #fff;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s;
                min-width: 50px;
                min-height: 50px;
                max-width: 50px;
                max-height: 50px;
                border-color: #000;
            }
            button:hover {
                background-color: #0056b3;
            }
            .restart {
                display: inline-block;
                padding: 10px 20px;
                background-color: #007bff;
                color: #fff;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s;
                min-height: 0px;
                max-width: 100px;
                border-color: #000;
                border-radius: 12px;
            }
            html {
                font-family: sans-serif;
            }
<html>
    <head>
    </head>
    <body>   
        <button onclick="change('1', '0')" id="1"></button><button onclick="change('2', '1')" id="2"></button><button onclick="change('3', '2')" id="3"></button><br>
        <button onclick="change('4', '3')" id="4"></button><button onclick="change('5', '4')" id="5"></button><button onclick="change('6', '5')" id="6"></button><br>
        <button onclick="change('7', '6')" id="7"></button><button onclick="change('8', '7')" id="8"></button><button onclick="change('9', '8')" id="9"></button><br>
        <p id="ptu"></p>
        <p id="pwi"></p>
        <button class="restart" onclick="clicked = [true, true, true, true, true, true, true, true, true]; grid = ['-', '-', '-', '-', '-', '-', '-', '-', '-']; turn = 'X'; document.getElementById('1').innerHTML = ''; document.getElementById('2').innerHTML = ''; document.getElementById('3').innerHTML = ''; document.getElementById('4').innerHTML = ''; document.getElementById('5').innerHTML = ''; document.getElementById('6').innerHTML = ''; document.getElementById('7').innerHTML = ''; document.getElementById('8').innerHTML = ''; document.getElementById('9').innerHTML = ''; document.getElementById('ptu').innerHTML = 'Turn: X'; ">Restart</button>
    </body>
</html>

The code is meant to make the buttons just change to either ‘X’ or ‘O’.

Tags:

3

Answers


  1. 0

    Check https://stackoverflow.com/a/28157789/16593715 (TL;DR: add vertical-align: middle; to the buttons).

    You could also use flexbox and divs to create the grid and buttons.

    Login or Signup to reply.
  2. 0

    The problem is that unclicked buttons are empty. It can be fixed by adding a non-breaking space to each button at the beginning.

    <button onclick="change('1', '0')" id="1">&nbsp;</button>
<button onclick="change('2', '1')" id="2">&nbsp;</button>
<button onclick="change('3', '2')" id="3">&nbsp;</button><br />
<button onclick="change('4', '3')" id="4">&nbsp;</button>
<button onclick="change('5', '4')" id="5">&nbsp;</button>
<button onclick="change('6', '5')" id="6">&nbsp;</button><br />
<button onclick="change('7', '6')" id="7">&nbsp;</button>
<button onclick="change('8', '7')" id="8">&nbsp;</button>
<button onclick="change('9', '8')" id="9">&nbsp;</button><br />
    Login or Signup to reply.
  3. 0

    This anomaly is caused by the addition of the inner-html content shifting the baseline of alignment. Add the "vertical-align: middle" property to your button CSS to control it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search