Setting and using custom properties of HTML objects in javascript
<p>I am trying to make a simple battleships game where a 10x10 table is used as the playing field. I want to be able to change the boat length and number of boats easily, which is why I am (attempting) to store information against the HTML object (table cell). The table has unique ids for each cell, written as cell_3_8.</p>

<p>My question is on how I can use a custom property, in this case, hasBoat in order to store and change information about the cells. I have set every cell to have the property hasBoat to 0 at the beginning, and am setting the value to 1 when I want a boat to be placed there. At the moment, nothing is happening to the table when I try to place boats, and when checking in the Chrome console, it says "Uncaught TypeError: Cannot set property 'hasBoat' of null". </p>

<p>If you could explain what the problem is here, and even better, how to fix it, that would be great. Here is the code:</p>

<pre><code>var boatCell
var boatNum;
var boatLen
var boatPos;

function getCoordinate() {

    for (boatNum = 1; boatNum &lt; 4; boatNum++) {
        for (boatLen = 1; boatLen &lt; 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";
            }
    }
}
</code></pre>