Same button style but different output - Html

BennyKwan
March 31, 2023
118 views
0 votes
2 Answers

I have a div with 3 buttons in it. Same style but the back button is not aligned at the center but at the left side. Does anyone know what is the problem here? The first 2 buttons are working fine until you click either VsComputer or VsPlayer, It will show 3 new buttons, in here the "Back" button is not align at the center.

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "block";
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "block";
  document.getElementById("backToMode").style.display = "block";
}

.buttons {
  text-align: center;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

<div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class="buttons" style="display:none;">
  <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

Answers

In your Javascript you set the display property to block

document.getElementById("backToMode").style.display="block";

Simply change it to inline-block will fix the problem.

document.getElementById("backToMode").style.display="inline-block";

Full Example, only line changed is the one mentioned above:

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "block";
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "block";
  document.getElementById("backToMode").style.display = "inline-block"; // this line need to be inline-block
}

.buttons {
  text-align: center;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

<div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class="buttons" style="display:none;">
  <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

METHOD 1:

I would suggest using flexbox for this scenario

Use css flexbox and it’s properties

In the HTML file I’ve modified the structure a bit in order to use flexbox. Both parent div’s should have display: flex as it’s css property

For CSS in first div

display: flex // to set the display property to flex
justify-content: center // to place the content horizontally in the center

since the second div flex direction is set to column

flex-direction: column;
align-items: center // to place the content horizontally in the center

to read more about usage of flexbox refer:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I’ve also added common width to all the buttons so that when you click on a button the layout stays consistent

button {
  width: 150px;
}

Below is the snippet

function firstTurn(turn) {
  if (turn == 'computer') {
    ComputerMove();
  }
  if (turn == 'player') {
    PlayerMove();
  }

  document.getElementById("turnButtons").style.display = "none";
}

function goBack() {
  document.getElementById("modeButtons").style.display = "flex"; // change this to "flex"
  document.getElementById("turnButtons").style.display = "none";
}

function changeMode(mode) {
  if (mode === 'computer') {
    // do something
  }
  if (mode === 'player') {
    // do something
  }

  document.getElementById("modeButtons").style.display = "none";
  document.getElementById("turnButtons").style.display = "flex"; // change this to "flex"
  document.getElementById("backToMode").style.display = "block";
}

.buttons {
  display: flex;
  justify-content: center;
}

.buttons2 {
  flex-direction: column;
  align-items: center;
}

button {
  width: 150px;
}

.style1 {
  background-color: #ff6b6b;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.style1:hover {
  background-color: #ff4d4d;
}

 <div id="modeButtons" class="buttons">
  <button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
  <button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>

<div id="turnButtons" class='buttons2' style="display:none;">
  <div class="buttons">
      <button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
  <button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
  </div>
    <button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>

METHOD 2:

for a quick fix you can just add this to your css

#backToMode {
  margin: 0 auto; // to place you content horizontally in the center
}

Please signup or login to give your own answer.

Click here to cancel reply.

Same button style but different output – Html

Answers