Onclick, the button moves down, why can that due to?

by Code Error
Posted By: Anonymous

Whenever I click a button and the value is inputted, the values in the box goes down. I’ve tried changing some CSS but it doesn’t work as I intend it to.

_x000D_

_x000D_

const game = (() => {
  const createPlayer = (name, marker, turn) => {
    return { name, marker, turn }
  }

  player1 = createPlayer('Player 1', "x", true)
  player2 = createPlayer('Player 2', "o", false)

  const gameBoard = () => {
    var gameBoard = []

    const movement = (e) => {
      if (player1.turn === true && e.target.textContent === "") {
        gameBoard[e.target.id] = player1.marker
        e.target.textContent = player1.marker
        player1.turn = false
      } else if (player1.turn === false && e.target.textContent === "") {
        gameBoard[e.target.id] = player2.marker
        e.target.textContent = player2.marker
        player1.turn = true
      }
      if (gameBoard["button-1"] === "x" && gameBoard["button-2"] === "x" && gameBoard["button-3"] === "x") {
        alert("perfect")
      } else if (gameBoard["button-4"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-6"] === "x") {
        alert("you win")
      } else if (gameBoard["button-7"] === "x" && gameBoard["button-8"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-1"] === "x" && gameBoard["button-4"] === "x" && gameBoard["button-7"] === "x") {
        alert("you win")
      } else if (gameBoard["button-2"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-8"] === "x") {
        alert("you win")
      } else if (gameBoard["button-3"] === "x" && gameBoard["button-6"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-2"] === "o" && gameBoard["button-3"] === "o") {
        alert("perfect")
      } else if (gameBoard["button-4"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-6"] === "o") {
        alert("you win")
      } else if (gameBoard["button-7"] === "o" && gameBoard["button-8"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-4"] === "o" && gameBoard["button-7"] === "o") {
        alert("you win")
      } else if (gameBoard["button-2"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-8"] === "o") {
        alert("you win")
      } else if (gameBoard["button-3"] === "o" && gameBoard["button-6"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-3"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-7"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-3"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-7"] === "x") {
        alert("you win")
      }

    }

    const board = document.querySelector('.item-board').addEventListener('click', movement)
  }

  gameBoard()
})

game()

_x000D_

.header {
  background-color: red;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.item-board {
  margin-left: 200px;
  display: inline-block;
}
.TicTac {
  background-size: cover;
  width: 100%;
  height: 100%;
}
.btn-1 {
  width: 100px;
  height: 100px;
  border: 2px solid;
  margin: -2px;
  font-size: 4rem;
  padding: 0px;
}
p {
  font-size: 200px;
}

_x000D_

<header class="header">
  <h1 class="TicTac">Tic-Tac-Toe</h1>
</header>
<div class="item-board">
  <div class="item-board">
    <button type="button" name="button" id="button-1" class="btn-1"></button>
    <button type="button" name="button" id="button-2" class="btn-1"></button>
    <button type="button" name="button" id="button-3" class="btn-1"></button>
  </div>
  <div class="item-board">
    <button type="button" name="button" id="button-4" class="btn-1"></button>
    <button type="button" name="button" id="button-5" class="btn-1"></button>
    <button type="button" name="button" id="button-6" class="btn-1"></button>
  </div>
  <div class="item-board">
    <button type="button" name="button" id="button-7" class="btn-1"></button>
    <button type="button" name="button" id="button-8" class="btn-1"></button>
    <button type="button" name="button" id="button-9" class="btn-1"></button>
  </div>
</div>

_x000D_

_x000D_

_x000D_

I’ve tried changing some CSS but can’t figure out how to make it so that it doesn’t go down on each click.

Solution

Your .btn-1 styling is aligning the elements based on their text content, this can be solved by applying vertical-align: top; to that class.

Another small change that’s worth making would be to change .item-board from inline-block to display: block, as that will prevent the width of the screen affecting whether the rows wrap.

_x000D_

_x000D_

const game = (() => {
  const createPlayer = (name, marker, turn) => {
    return { name, marker, turn }
  }

  player1 = createPlayer('Player 1', "x", true)
  player2 = createPlayer('Player 2', "o", false)

  const gameBoard = () => {
    var gameBoard = []

    const movement = (e) => {
      if (player1.turn === true && e.target.textContent === "") {
        gameBoard[e.target.id] = player1.marker
        e.target.textContent = player1.marker
        player1.turn = false
      } else if (player1.turn === false && e.target.textContent === "") {
        gameBoard[e.target.id] = player2.marker
        e.target.textContent = player2.marker
        player1.turn = true
      }
      if (gameBoard["button-1"] === "x" && gameBoard["button-2"] === "x" && gameBoard["button-3"] === "x") {
        alert("perfect")
      } else if (gameBoard["button-4"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-6"] === "x") {
        alert("you win")
      } else if (gameBoard["button-7"] === "x" && gameBoard["button-8"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-1"] === "x" && gameBoard["button-4"] === "x" && gameBoard["button-7"] === "x") {
        alert("you win")
      } else if (gameBoard["button-2"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-8"] === "x") {
        alert("you win")
      } else if (gameBoard["button-3"] === "x" && gameBoard["button-6"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-2"] === "o" && gameBoard["button-3"] === "o") {
        alert("perfect")
      } else if (gameBoard["button-4"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-6"] === "o") {
        alert("you win")
      } else if (gameBoard["button-7"] === "o" && gameBoard["button-8"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-4"] === "o" && gameBoard["button-7"] === "o") {
        alert("you win")
      } else if (gameBoard["button-2"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-8"] === "o") {
        alert("you win")
      } else if (gameBoard["button-3"] === "o" && gameBoard["button-6"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-9"] === "o") {
        alert("you win")
      } else if (gameBoard["button-3"] === "o" && gameBoard["button-5"] === "o" && gameBoard["button-7"] === "o") {
        alert("you win")
      } else if (gameBoard["button-1"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-9"] === "x") {
        alert("you win")
      } else if (gameBoard["button-3"] === "x" && gameBoard["button-5"] === "x" && gameBoard["button-7"] === "x") {
        alert("you win")
      }

    }

    const board = document.querySelector('.item-board').addEventListener('click', movement)
  }

  gameBoard()
})

game()

_x000D_

.header {
  background-color: red;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.item-board {
  margin-left: 50px;
  display: block; /* This prevents the rows appearing on the same line on wide screens */
}
.TicTac {
  background-size: cover;
  width: 100%;
  height: 100%;
}
.btn-1 {
  width: 100px;
  height: 100px;
  border: 2px solid;
  margin: -2px;
  font-size: 4rem;
  padding: 0px;
  vertical-align: top; /* Top will fix the alignment issue when text content is added to the button */
}
p {
  font-size: 200px;
}

_x000D_

<header class="header">
  <h1 class="TicTac">Tic-Tac-Toe</h1>
</header>
<div class="item-board">
  <div class="item-board">
    <button type="button" name="button" id="button-1" class="btn-1"></button>
    <button type="button" name="button" id="button-2" class="btn-1"></button>
    <button type="button" name="button" id="button-3" class="btn-1"></button>
  </div>
  <div class="item-board">
    <button type="button" name="button" id="button-4" class="btn-1"></button>
    <button type="button" name="button" id="button-5" class="btn-1"></button>
    <button type="button" name="button" id="button-6" class="btn-1"></button>
  </div>
  <div class="item-board">
    <button type="button" name="button" id="button-7" class="btn-1"></button>
    <button type="button" name="button" id="button-8" class="btn-1"></button>
    <button type="button" name="button" id="button-9" class="btn-1"></button>
  </div>
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *