时间戳

首页 > 解决方案 > 六边形网格算法失败

javascript - 六边形网格算法失败

问题描述

我创建了一个以六边形网格为前景的游戏。我创建了一个算法来显示代码，但收到以下错误：

未捕获的类型错误：无法在 hexagonPosition.js:34 处读取 null 的属性“appendChild”。

//hexagonPosition.js

var hexGrid = document.getElementById("hex-grid");

for (var rows = 0; rows < 20; rows++) {
    var hexGroup = document.createElement("div");
    hexGroup.id = ("hex-group" + rows);
    for (var cols = 0; cols < 55; cols++) {
        var hexTile = document.createElement("div");
        hexTile.id = ("hex-tile-x" + cols + "-y" + rows);
        hexTile.setAttribute("class", "hex-tile" + rows);
        hexGroup.appendChild(hexTile);
    }
        hexGrid.appendChild(hexGroup);
}
//style.css
.hex {
  clip-path: polygon(75% 10%, 100% 50%, 75% 90%, 25% 90%, 0 50%, 25% 10%);
  width: 75px;
  height: 75px;
}
.transparent {
  visibility: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="..\CSS\style.css" />

</head>

<body>
<div id="WhatShouldResult">
<div class="hex-grid">
  <div class="hex-group1">
    <div class="hex-tile1">
    </div>
    <div class="hex-tile2">
    </div>
    <div class="hex-tile3">
    </div>
  </div>
  <div class="hex-group2">
    <div class="hex-tile2">
    </div>
  </div>
</div>

</div>
<div class="hex-grid"></div>
  <script src="../JS/hexagonPosition.js"></script>
  </body>

</html>

标签： javascripthtml

解决方案

问题是在下一行中，您通过 ID 获取元素。

var hexGrid = document.getElementById("hex-grid");

但是在您的 HTMLhex-grid中是一个类，而不是一个 ID。

<div class="hex-grid">

如果您将该行 JavaScript 更改为以下内容，它应该可以工作。

var hexGrid = document.getElementsByClassName("hex-grid")[0];

这将获得第一个具有类名的元素hex-grid。

或者，您当然可以将 HTML 更改为 ID 而不是类。

推荐阅读