CODEWITHSUNDEEP
javascriptdom
Христо Петков
Христо Петков

Reputation: 115

JavaScript Chess Board using DOM

Hello guys I've recently started doing a chess application and I got everything set up except for the GUI. For some reason I can't get the tiles for the board to display and I don't know why. (Speculation) I think my problem has something to do with my usage of the DOM. Unfortunately for me, I've been trying to solve it for days now with no success. Could someone please help and enlighten me on this issue might be resolved because I don't know what I am missing at this point, although I suspect it is something very simple. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script type="text/javascript">
             function drawBoard(){
                  var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                  11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
                  25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 
                  39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
                  53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];

                  for(var i = 1; i <= board.length; i++){
                      if(i % 2 == 0){
                           document.getElementById("whiteSquare");
                      }else{
                           document.getElementById("blackSquare");
                      }
                  }
             }
      </script>
      <style type="text/css">
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  float: left;
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            #whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
            }

            #blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
     <div id="whiteSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
     <div id="blackSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
</body>
</html>

PS: Yes, I know the code looks bad and could be done in a better way I'll do the refactoring later.

Thanks in advance, to all who would try to help.

Upvotes: 2

Views: 881

Answers (3)

user3310334
user3310334

Reputation:

The reason you only get two squares:

document.getElementById returns an existing element; an element that already exists. In your HTML, you have only created 2 squares, and you never create any more.

I think every time you've used document.getElementById you are trying to create a new square.

You should use document.createElement instead of document.getElementById to create new elements.

So steps to fix your problem:

  1. ids must be unique. Style for classes instead (to have more than 1 white square, and more than 1 black square):

    .whiteSquare{
    width: 60px;
    height: 60px;
    background-color: white;
}

.blackSquare{
    width: 60px;
    height: 60px;
    background-color: black;
}

  2. Remove the initial <div id="whiteSquare"> and <div id="blackSquare"> elements from your HTML. We will create them in JavaScript.

  3. Replace 

    for(var i = 1; i <= board.length; i++){
    if(i % 2 == 0){
        document.getElementById("whiteSquare");
    }else{
        document.getElementById("blackSquare");
    }
}

    with 

    for (var i = 0; i < board.length; i++) {
  var square = document.createElement("div");
  if (i / 8 % 2 < 1) {
    if (i % 2 == 0) square.classList.add("whiteSquare");
    else square.classList.add("blackSquare");
  } else {
    if (i % 2 == 0) square.classList.add("blackSquare");
    else square.classList.add("whiteSquare");
  }
  document.getElementById("gameBoardBorder").appendChild(square);
}

  4. To get the squares to display in the right places, you need to add display: inline-block; to their stylings.

  5. To get rid of a gap in-between rows of squares, set the style rule line-height: 0; on #gameBoardBorder

Note I put all the squares inside of #gameBoardBoarder.

function drawBoard() {
  var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
    11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
    25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
    39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
    53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63
  ];

  for (var i = 0; i < board.length; i++) {
    var square = document.createElement("div");
    if (i / 8 % 2 < 1) {
      if (i % 2 == 0) square.classList.add("whiteSquare");
      else square.classList.add("blackSquare");
    } else {
      if (i % 2 == 0) square.classList.add("blackSquare");
      else square.classList.add("whiteSquare");
    }
    document.getElementById("gameBoardBorder").appendChild(square);
  }
}
#gameBoardBorder {
  width: 480px;
  height: 480px;
  border: solid;
  border-color: black;
  border-width: 2px;
  float: left;
  line-height: 0;
}

#gameBoardBorder > * {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  font-family: sans-serif;
}

.whiteSquare {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: white;
}

.blackSquare {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: black;
}

body {
  background-color: lightblue;
}
<body onload="drawBoard()">
  <h1>Chess Board</h1>
  <div id="gameBoardBorder">
    <!-- Noting more needed to be done here, rest will be in the css -->
  </div>
</body>

Upvotes: 3

tonethar
tonethar

Reputation: 2282

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script>
			 function drawBoard(){
				let row = 1;
				for(let i = 1; i <= 64; i++){
						if(row % 2 == 0){ // row 2,4,6,8
							var color = i % 2 == 0 ? "whiteSquare" : "blackSquare";
						}else{ // row 1,3,5,7
							var color = i % 2 == 0 ? "blackSquare" : "whiteSquare";
						}
						let square = document.createElement("div");
						square.className = color;
						if (i % 8 == 0){ //  new row
							square.style = "clear:all";
							row++;
						}
						gameBoardBorder.appendChild(square);
				}
			 }
      </script>
      <style>
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  float: left;
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            .whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
                  float: left;
            }

            .blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
                  float: left;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
</body>
</html>

Upvotes: 0

dwjohnston
dwjohnston

Reputation: 11812

In your example, you aren't actually creating any elements.

You need to create elements with Document.createElement, and then insert them with element.appendChild

Here is a simple unformatted example. 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>Chess Game</title>
      <script type="text/javascript">
             function drawBoard(){
                  var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                  11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
                  25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 
                  39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
                  53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];

                  const container = document.getElementById("gameBoardBorder"); 
                  for(var i = 1; i <= board.length; i++){
                  
                      let el = document.createElement('div'); 
                      if(i % 2 == 0){
                           el.className = "whiteSquare"; 
                      }else{
                           el.className ="blackSquare"; 
                      }
                      
                      container.appendChild(el); 
                  }
             }
      </script>
      <style type="text/css">
            #gameBoardBorder{
                  width: 480px;
                  height: 480px;
                  border: solid;
                  border-color: black;
                  border-width: 2px;
                  display: flex; 
                  flex-flow: row wrap; 
            }

            h1{
                  text-align: center;
                  font-family: sans-serif;
            }

            .whiteSquare{
                  width: 60px;
                  height: 60px;
                  background-color: white;
            }

            .blackSquare{
                  width: 60px;
                  height: 60px;
                  background-color: black;
            }

            body{
                  background-color: lightblue;
            }
      </style>
</head>
<body onload="drawBoard()">
     <h1>Chess Board</h1>
     <div id="gameBoardBorder">
           <!-- Noting more needed to be done here, rest will be in the css -->
     </div>
     <div id="whiteSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
     <div id="blackSquare">
           <!-- Noting more needed to be done here, rest will be in the css and javaScript-->
     </div>
</body>
</html>

Now you can see that this doesn't actually create a chess board like you want - because the way the elements wrap (always left to right) means that you don't actually want every second element to be white.

It's up to you to decide how you want to handle this logic.

Upvotes: 1

Related Questions