Skip to content
Fix Code Error

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

June 22, 2021 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

  • How do I keep only the first map and when the game is…
  • VueJS masonry layout
  • DataTable draw daterange from vaadin-date-picker in polymer
  • How can I pass a wct test while rearranging children spans…
  • render function or template not defined in component:…
  • How to prevent scrolling the whole page?
  • How can I add class active if the element click on the vue…
  • How would I be able to multiple select and pass data in the…
  • How to access this variable from my store / state in my vue…
  • What is causing this broken animation/transition in a Vue.js…

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

Post navigation

Previous Post:

Flutter : How to make every card unique using Listview.builder?

Next Post:

Compare columnA to columnB and get percentage of specific column

Leave a Reply Cancel reply

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

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error