六邊形網格算法失敗
[英]Hexagon Grid Algorithm Fail
問題描述
我創建了一個以六邊形網格為前景的游戲。 我創建了一個算法來顯示代碼，但收到以下錯誤：
未捕獲的類型錯誤：無法在 HexexPosition.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>
1 個解決方案
解決方案1
2 2018-12-27 19:10:51
問題是在下一行中，您將通過 ID 獲取元素。
var hexGrid = document.getElementById("hex-grid");
但是在您的 HTML hex-grid是一個類，而不是一個 ID。
<div class="hex-grid">
如果您將那行 JavaScript 更改為以下內容，它應該可以工作。
var hexGrid = document.getElementsByClassName("hex-grid")[0];
這將獲得類名稱為hex-grid的第一個元素。
或者當然您可以將 HTML 更改為 ID 而不是類。
六邊形圖上的運動算法
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.