Установка и использование пользовательских свойств HTML-объектов в JavaScript

Question

Я пытаюсь сделать простую игру на линкорах, где в качестве игрового поля используется стол 10х10. Я хочу, чтобы можно было легко изменять длину и количество лодок, поэтому я (пытаюсь) хранить информацию относительно объекта HTML (ячейка таблицы). Таблица имеет уникальные идентификаторы для каждой ячейки, записанные как cell_3_8.

Мой вопрос заключается в том, как я могу использовать пользовательское свойство, в данном случае hasBoat, для хранения и изменения информации о ячейках. Я установил в каждой ячейке свойство hasBoat, равное 0, и устанавливаю значение 1, когда я хочу, чтобы лодка была размещена там. На данный момент с таблицей ничего не происходит, когда я пытаюсь разместить лодки, и при проверке в консоли Chrome появляется сообщение "Uncaught TypeError: Невозможно установить свойство hasBoat of 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>

Answer 2

Вы получаете сообщение об ошибке не о настройке hasBoat приписывать. Вместо этого boatCell является null, Я полагаю, что вы хотели иметь if внутри for, вот так:

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