Need Help With A Javascript Problem

Hello, I am currently working through a book called Head First Javascript and on Chapter 8 we are building a battleship game. I am trying to test the Model object and what I want is to display “hits” on various “cells” that I have hardcoded. Unfortunately I am not getting the expected output. Instead, when I check the Console it says "Uncaught type Error: Cannot Read Property ‘SetAttribute’ of battleship.js:10 null

I have linked to pictures of my JS code, my html code, the expected output I am supposed to be getting, and the output that I am currently getting. Here is the link: https://imgur.com/a/RzaM3La

Any advice or help regarding this problem would be amazing. Thanks a lot!

if you want help you will need to post here your actual code, not a screenshot, as it is impossible to debug from a screenshot.
you can link to it if you are working on a project online or have a github repository, or just paste the code here

Hey there @umared1,

  • Next time you want to showcase a code, use the ``` backtick so it is easier for everyone to read.
    See this post to find the backtick on your keyboard.
    The “preformatted text” tool in the editor (</>) will also add backticks around text.

My apologies here is my code using the backtick

var view = {
 displayMessage: function(msg) {
  var messageArea = document.getElementById("messageArea");
  messageArea.innerHTML = msg;
},
 displayHit: function(location) {
  var cell = document.getElementById(location);
  cell.setAttribute("class", "hit");
},
 displayMiss: function(location) {
  var cell = document.getElementById(location);
  cell.setAttribute("class", "miss");
}

};





var model = {
  boardSize: 7,
  numShips: 3,
  shipsSunk: 0,
  shipLength: 3,
  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 index = ship.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;
  }

};
/* view.displayMiss("00");
 view.displayHit("34");
 view.displayMiss("55");
 view.displayHit("12");
 view.displayMiss("25");
 view.displayHit("26");

 view.displayMessage("Tap tap, is this thing on?"); */

model.fire("53");

model.fire("06");
model.fire("16");
model.fire("26");

model.fire("34");
model.fire("24");
model.fire("44");

model.fire("12");
model.fire("11");
model.fire("10"); 

And here is my HTML using backtick

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Battleship</title>
 <style>
  body {
   background-color: black;
   
}

 div#board {
  position: relative;
  width: 1024px;
  height: 863px;
  margin: auto;
  background: url("board.jpg") no-repeat;
  
}

 div#messageArea {
  position: absolute;
  top: 0px;
  left: 0px;
  color: rgb(83, 175, 19);
}

 table {
  position: absolute;
  left: 173px;
  top: 98px;
  border-spacing: 0px;
}

 td {
  width: 94px;
  height: 94px;
}

 form {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 15px;
  background-color: rgb(83, 175, 19);
}

 form input {
  background-color: rgb(152, 207, 113);
  border-color: rgb(83, 175, 19);
  font-size: 1em;
}

 .hit {
   background: url("ship.png") no-repeat center center;
}

 .miss {
  background: url("miss.png") no-repeat center center;
}

 </style>

</head>
<body>
 <div id="board">
  <div id="messageArea"></div>
  <table>

   <tr>
    <td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td>
    <td id="05"></td><td id="06"></td>
   </tr>

   <tr>
    <td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td>
    <td id="15"></td><td id="16"></td>
   </tr>

   <tr>
    <td id="20"></td><td id="21"></td><td id="22"></td><td id="23></td><td id="24"></td>
    <td id="25"></td><td id="26"></td>
   </tr>

   <tr>
    <td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td>
    <td id="35"></td><td id="36"></td>
   </tr>

   <tr>
    <td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td>
    <td id="45"></td><td id="46"></td>
   </tr>

   <tr>
    <td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td>
    <td id="55"></td><td id="56"></td>
   </tr>

   <tr>
    <td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td>
    <td id="65"></td><td id="66"></td>
   </tr>

   
  </table>

  <form>
   <input type="text" id="guessInput" placeholder="A0">
   <input type="button" id="fireButton" value="Fire!">
  </form>

 </div>
 <script src="battleship.js"></script>
</body>
</html>

The error means you are querying for an id that is not in the DOM (on the page), so it is null.

Looking at the fire method the last call to it has “10” but I don’t see an element with that id in the HTML.

But what about <td id=“10” in the second table row?

Sorry I was looking at the images, I didn’t see the code you posted.

You didn’t close this id string

<td id="23></td>

should be
<td id="23"></td>

1 Like

Jesus christ. I love you lasjorg. It worked. :grinning: :stuck_out_tongue_winking_eye: :stuck_out_tongue: