时间戳

首页 > 解决方案 > 使用 DOM 的 JavaScript 棋盘

javascript - 使用 DOM 的 JavaScript 棋盘

问题描述

大家好，我最近开始做一个国际象棋应用程序，除了 GUI 之外，我已经完成了所有设置。出于某种原因，我无法让板上的瓷砖显示，我不知道为什么。（推测）我认为我的问题与我对 DOM 的使用有关。对我来说不幸的是，我已经尝试解决它好几天了，但没有成功。有人可以帮助并启发我解决这个问题，因为我不知道此时我缺少什么，尽管我怀疑这是非常简单的事情。这是代码：

<!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：是的，我知道代码看起来很糟糕，可以以更好的方式完成，我稍后会进行重构。

在此先感谢所有愿意提供帮助的人。

标签： javascriptdom

解决方案

你只得到两个正方形的原因：

document.getElementById返回一个现有元素；已经存在的元素。在您的 HTML 中，您只创建了 2 个正方形，并且您再也不会创建。

我认为每次你使用document.getElementById你都在尝试创建一个新的正方形。

您应该使用document.createElement而不是document.getElementById创建新元素。

因此，解决您的问题的步骤：

  1. ids 必须是唯一的。改为 es的样式class（具有超过 1 个白色方块和超过 1 个黑色方块）：

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

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

  2. 从您的 HTML 中删除初始<div id="whiteSquare">和<div id="blackSquare">元素。我们将在 JavaScript 中创建它们。

  3. 代替

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

    和

    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. 要让方块显示在正确的位置，您需要添加display: inline-block;它们的样式。

  5. 要消除正方形行之间的间隙，请将样式规则设置line-height: 0;为#gameBoardBorder

注意我把所有的方块都放在 .#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>

推荐阅读