Table of clickable buttons – click a button unintentionally moves it down …?

Here is a code to to create a table style of buttons according to user input number of rows/cols. After it creates the table, each button click, adds “X” or “O” text to it.

var flag = "X";

var clicked = function() {
  if (this.innerHTML == "X" || this.innerHTML == "O") {
    alert("BUSY");
  } else if (this.innerHTML == "") {
    this.innerHTML = flag;
    if (flag == "X") {
      flag = "O"
    } else if (flag == "O") {
      flag = "X"
    }
  }
}

function createBoard() {
  var val = document.getElementById('nTabelInput').value;
  var box = document.getElementById('box');
  box.innerHTML = " "; //empty outer div(box)

  for (var j = 1; j <= val; j++) {
    var lineDiv = document.createElement('div'); //create div for one line of btns
    box.appendChild(lineDiv); //append this line to outer div(box)

    for (var i = 1; i <= val; i++) {
      var oneBtnInLine = document.createElement('button'); //create one btn in line
      oneBtnInLine.className = "btn"; //use for design
      lineDiv.appendChild(oneBtnInLine); //append btn in the line
      oneBtnInLine.innerHTML = "";
      oneBtnInLine.addEventListener('click', clicked);
    }
  }
}

createBoard();
.btn {
  width: 50px;
  height: 50px;
  background-color: #ffb2bf;
  border: 0;
  margin: 1px;
  border-radius: 5px;
}
<span>Number of rows & columns: </span>
<input id="nTabelInput" value="3" style="width: 60px" min="3" type="number" onclick="createBoard()">
<div id="box"></div>

The problem is that each click changes the user interface so that the button pops down. It resets only after clicking the entire line.

Could you please help me figure why is it ?

and how to fix it (means the button doesn’t move)?

Thanks a lot in advanced.

Answer

If you add vertical-align: bottom; or vertical-align: top; then it will work perfectly!

Here’s the code:

var flag = "X";

var clicked = function() {
  if (this.innerHTML == "X" || this.innerHTML == "O") {
    alert("BUSY");
  } else if (this.innerHTML == "") {
    this.innerHTML = flag;
    if (flag == "X") {
      flag = "O"
    } else if (flag == "O") {
      flag = "X"
    }
  }
}

function createBoard() {
  var val = document.getElementById('nTabelInput').value;
  var box = document.getElementById('box');
  box.innerHTML = " "; //empty outer div(box)

  for (var j = 1; j <= val; j++) {
    var lineDiv = document.createElement('div'); //create div for one line of btns
    box.appendChild(lineDiv); //append this line to outer div(box)

    for (var i = 1; i <= val; i++) {
      var oneBtnInLine = document.createElement('button'); //create one btn in line
      oneBtnInLine.className = "btn"; //use for design
      lineDiv.appendChild(oneBtnInLine); //append btn in the line
      oneBtnInLine.innerHTML = "";
      oneBtnInLine.addEventListener('click', clicked);
    }
  }
}

createBoard();
  .btn {
        width:50px;
        height:50px;
        background-color: #ffb2bf;
        border: 0;
        margin: 1px;
        border-radius: 5px;
        vertical-align: bottom;
   }
<span>Number of rows & columns: </span>
<input id="nTabelInput" value="3" style="width: 60px" min="3" type="number" onclick="createBoard()">
<div id="box"></div>