Battleship with javascript issue

I made a battleship game following along with the Head First JS programming book. I am able to get the game to work when I have hardcoded locations for ships, but the issue arises when i code for ship locations, ship generations and collisions. What occurs is that the game doesn't load, even the CCS/html grid doesn't show except the input bar.

below is the code with the predetermined locations under "model" object which keeps track of the ships.

var model = {
    boaddsize: 7,
    numShips: 3,
    shipLength: 3,
    shipsSunk: 0,
    
    ships: [
        { locations: ["06", "16", "26"], hits:["", "", ""]},
        { locations: ["24", "34", "44"], hits:["", "", ""]},
        { locations: ["10", "11", "12"], hits:["", "", ""]}
    ],
   fire: function(guess) {
        for (var i = 0; i < this.numShips; i++) {
            var ship = this.ships[i];
            var locations = ship.locations;
            var index = locations.indexOf(guess);
            if (index >=0) {
                ship.hits[index] = "hit";
                view.displayHit(guess);
                view.displayMessage("HIT");
                if (this.isSunk(ship)) {
                    view.displayMessage("You sank my battleship!!");
                    this.shipsSunk++;
                }
                return true;
            }
        }
        view.displayMiss(guess);
        view.displayMessage("You missed!");
        return false;
    },
    isSunk: function(ship) {
        for (var i = 0; i < this.shipLength; i++) {
            if (ship.hits[i] !== "hit") {
                return false;
            }
        }
        return true;
    }

};

This works fine and everything loads perfectly. Now when i enter code to generate ships, locations and stop collisions into the model object, the app doesn't load, nor does the image of the grid.

    generateShipLocations: function() {
        var locations;
        for (var i = 0; i < this.numShips; i++) {
            do {
                locations = this.generateShip();
            } while (this.collision(locations));
            this.ships[i].locations = locations;
        }
    },
    
    generateShip: function() {
        var direction = Math.floor(Math.random() * 2);
        var row;
        var col;
        if (direction === 1) {
            row = Math.floor(Math.random() * this.boardSize);
            col = Math.floor(Math.random() * (this.boaddsize - (this.shipLength + 1)));
        } else {
            row = Math.floor(Math.random() * (this.boaddsize - (this.shipLength + 1)));
            col = Math.floor(Math.random * this.boaddsize);
        }
        var newShipLocations = [];
        for (var i = 0; i < this.shipLength; i++) {
            if (direction === 1) {
                newShipLocations.push(row + "" + (col + i));
            } else {
                newShipLocations.push((row + i) + "" + col);
            }
        }
        return newShipLocations;
    },
    
    collision: function(locations) {
        for (var i = 0; i < this.numShips; i++) {
            var ship = this.ships[i];
            for (var j = 0; j < locations.length; j++) {
                if (ship.locations.indexOf(locations[j]) >= 0) {
                    return true;
                }
            }
        }
        return false;
    }

Also i updated the ships array from hardcoded locations to 0's

    ships: [
        { locations: [0, 0, 0], hits:["", "", ""]},
        { locations: [0, 0, 0], hits:["", "", ""]},
        { locations: [0, 0, 0], hits:["", "", ""]}
    ],

These are the functions i have in place so the fire button works.

function init() {
    var fireButton = document.getElementById("fireButton");
    fireButton.onclick = handleFireButton;
    var guessInput = document.getElementById("guessInput");
    guessInput.onkeypress = handleKeyPress;
    model.generateShipLocations();
}

function handleKeyPress(e) {
    var fireButton = document.getElementById("fireButton");
    if (e.keyCode === 13) {
        fireButton.click();
        return false;
    }
}

function handleFireButton() {
    var guessInput = document.getElementById("guessInput");
    var guess = guessInput.value;
    controller.processGuess(guess);
    
    guessInput.value = "";
}

window.onload = init;

Please let me know where i went wrong and if the entire JS code is required to assist me in debugging let me know.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW