Question

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

未捕获到的TypeError：无法读取hexagonPosition.js：34处的null属性'appendChild'。

class ProductCategory(models.Model):
    _name = "product.category"
    _description = "Product Category"
    _parent_name = "parent_id"
    _parent_store = True
    _parent_order = 'name'
    _rec_name = 'complete_name'
    _order = 'parent_left'

    parent_id = fields.Many2one('product.category', 'Parent Category', index=True, ondelete='cascade')
    parent_left = fields.Integer('Left Parent', index=1)
    parent_right = fields.Integer('Right Parent', index=1)

    @api.constrains('parent_id')
    def _check_category_recursion(self):
        if not self._check_recursion():
            raise ValidationError(_('Error ! You cannot create recursive categories.'))
        return True

//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;
}

Answer 1

问题在于，在下面的行中，您通过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而不是类。

六角网格算法失败

1 个答案: