javascript - 在 javascript 中设置和使用 HTML 对象的自定义属性

Question

我正在尝试制作一个简单的战舰游戏，其中使用 10x10 table 作为比赛 field 。我希望能够轻松更改船的长度和船的数量，这就是我(尝试)针对 HTML 对象(表格单元格)存储信息的原因。该表的每个单元格都有唯一的 ID，写为 cell_3_8。

我的问题是如何使用自定义属性(在本例中为 hasBoat)来存储和更改有关单元格的信息。我一开始就将每个单元格的属性 hasBoat 设置为 0，当我想要将船放置在那里时，将值设置为 1。目前，当我尝试放置船只时， table 上没有发生任何事情，并且在检查 Chrome 控制台时，它显示“未捕获的类型错误:无法将属性“hasBoat”设置为 null”。

如果您能解释这里的问题所在，甚至更好地解释如何解决它，那就太好了。这是代码:

var boatCell
var boatNum;
var boatLen
var boatPos;

function getCoordinate() {

    for (boatNum = 1; boatNum < 4; boatNum++) {
        for (boatLen = 1; boatLen < 4; boatLen++) {
            var x = Math.floor(Math.random() * 10);
            var y = Math.floor(Math.random() * 10 + 1);
            x = x++;
            boatPos = "cell_" + "_" + x + "_" + y;
            boatCell = document.getElementById(boatPos);
            boatCell.hasBoat = 1;
        }
            if (boatCell.hasBoat == 1) {
                boatCell.style.backgroundColor = "brown";
            }
    }
}

Answer 1

你的问题是因为你没有 id = "cell_"+ ""+ x + ""+ y 的元素;和boatCell = document.getElementById(boatPos);将变量 BoatCell 的值设置为 null，请参阅示例

var exist = document.getElementById("cell_1_4");
console.log(exist);

var notExist = document.getElementById("cell_1_3");
console.log(notExist);

<div id="cell_1_4"></div>