Issue with testing value of properties javascript
<p>I am making a battleships game. I have 3 different methods that I am using, the first of which is placeBoat() which is used to run selectPos(), then test if a boat has been placed over another boat. If there is no overlap, it will run buildBoat(), and if there is, it will run placeBoat() again. </p>

<p>SelectPos() chooses a coordinate, and buildBoat() constructs a boat that is three tiles long, as well as making a "hitbox", where boats cannot be placed. If a boat is placed, or a hitbox is placed, the property hasBoat of that tile will be changed to 1, which is how I am checking for overlap.</p>

<p>However, when I run this program, it seems to only place one boat normally, and occasionally it will place 2 or 3, but without a hitbox. If there are any further questions that you have about how the program works, ask in comments below. Here is the code:</p>

<pre><code>    var boatGrid = {

    placeBoat : function() { //Runs selectPos() and buildBoat() depending on whether there is an empty tile.
        for (boatNum = 1; boatNum &lt; 4; boatNum++) {
            console.log("boat placed now");
            this.selectPos();
            document.getElementById("boattest").innerHTML = boatPos;
            if (document.getElementById(boatPos).boatHere == 1) {
                this.placeBoat();
                console.log("boat placement failed...");
            }
            else {
                this.buildBoat();               
            }
        }   
    }, 

    selectPos : function() { //chooses coordinates of the boat
            xPos = Math.floor(Math.random() * 8);
            yPos = Math.floor(Math.random() * 10 + 1);
            boatPos = "cell_" + xPos + "_" + yPos;
    },

    buildBoat : function() { //constructs the boat
        for (boatLen = 1; boatLen &lt; 4; boatLen++) {
            xPos = xPos + 1;
            boatPos = "cell_" + xPos + "_" + yPos;
            document.getElementById(boatPos).hasBoat = 1;
            document.getElementById(boatPos).style.backgroundColor = "brown";
            console.log("placed one tile");
        }
        xPos = xPos - 6;
        for (boatBox = 1; boatBox &lt; 8; boatBox++) { //constructs hitbox
            xPos++;
            boatPos = "cell_" + xPos + "_" + yPos;
            document.getElementById(boatPos).boatHere = 1;
            document.getElementById(boatPos).innerHTML = "  X";
        }
    },
</code></pre>