Chore Door innerHTML error

Hey! Heres the link to the exercise I’m working on Chore Door Would someone be able to help me please? The script on my start button isn’t changing and when I inspect the code I’m getting this error

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at gameOver (script.js:75)
    at playDoor (script.js:31)
    at HTMLImageElement.door3.onclick (script.js:69) 

And here’s my code:

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('id');

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const isClicked = (door) => {
  if (door.src === closedDoorPath) {
  return false;
} else {
  return true;
}
}

const playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0){
    gameOver('win');
  }
}

const randomChoreDoorGenerator = () => {
 const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if(choreDoor === 0) {
  openDoor1 = botDoorPath;
  openDoor2 = beachDoorPath;
  openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) { 
  openDoor2 = botDoorPath;
  openDoor3 = beachDoorPath;
  openDoor1 = spaceDoorPath;
} else { (choreDoor === 2)
  openDoor3 = botDoorPath;
  openDoor1 = beachDoorPath;
  openDoor2 = spaceDoorPath;
}
}

door1.onclick = () => {
  if(!isClicked(doorImage1)) {
  doorImage1.src = openDoor1;
  playDoor();
}
}

door2.onclick = () => {
  if(!isClicked(doorImage2)) {
  doorImage2.src = openDoor2;
  playDoor();
}
}

door3.onclick = () => {
  if(!isClicked(doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor();
}
}

const gameOver = (status) => {
  if (status === 'win') {
  startButton.innerHTML = 'You win! Play again?';
}
}

randomChoreDoorGenerator()
<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="header">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div>

    <div class="title-row">
       <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
       <p class="instructions-title">Instructions</p>
       <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
    </div>

    <table class="instructions-row">
       <tr>
         <td class="instructions-number">1</td>
         <td class="instructions-text">Hiding behind one of these doors is the ChoreBot.</td>
       </tr>
       <tr>
         <td class="instructions-number">2</td>
         <td class="instructions-text">Your mission is to open all of the doors without running into the ChoreBot.</td>
       </tr>
       <tr>
         <td class="instructions-number">3</td>
         <td class="instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
       </tr>
       <tr>
         <td class="instructions-number">4</td>
         <td class="instructions-text">See if you can score a winning streak!</td>
       </tr>
    </table>

<div class="door-row">
      <img id="door1" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>

    <div id="start" class="start-row">Good luck!</div>

    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

I’d really appreciate the help! Thank you

Hi there.

The error is telling you what the issue is, and where it is occurring.

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at gameOver (script.js:75)
    at playDoor (script.js:31)
    at HTMLImageElement.door3.onclick (script.js:69) 

The error is that we’re trying to set the innerHTML property somewhere, but on an object we have not initialised. Let’s see where that’s happening, shall we.

Let’s take a look at your onclick function for door3, as this is what has been called first.

door3.onclick = () => {
  if(!isClicked(doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor();
}
}

We’re not setting innerHTML here, so let’s move on to the next function on the call stack: playDoor():

const playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0){
    gameOver('win');
  }
}

Again, no reference to an innerHTML property here so let’s continue to the next function called: gameOver().

const gameOver = (status) => {
  if (status === 'win') {
  startButton.innerHTML = 'You win! Play again?';
}
}

Aha! Here, we are setting the innerHTML property of the startButton object. We can see, in your code, that you’ve declared startButton like so:

let startButton = document.getElementById('id');

I can’t see any element in your HTML with an id of id, can you? As a result, document.getElementById("id"); will find nothing and return undefined. This is why you’re seeing an error; we cannot set a property on something which does not exist.

Can you find the error and correct it? :slight_smile:

THANK YOU sooo much! I’ve managed to fix it.

I really appreciate the help with that!

1 Like

So I managed to fix that, but once I add step 58 (adding the isBot function), my doors won’t open. The error I’m getting is ‘Uncaught SyntaxError: Unexpected end of input script.js:86’. This is the last line of code. I copied and pasted step 58 and checked the help video and as far as I can tell I’m entering the right code.

This is my code

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start');

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const isBot = (door) => {
  if(door.src === botDoorPath) {
    return true;
  } else {
    return false;
}

const isClicked = (door) => {
  if (door.src === closedDoorPath) {
  return false;
} else {
  return true;
}
}

const playDoor = () => {
  numClosedDoors--;
  if (numClosedDoors === 0){
    gameOver('win');
}
}

const randomChoreDoorGenerator = () => {
 const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if(choreDoor === 0) {
  openDoor1 = botDoorPath;
  openDoor2 = beachDoorPath;
  openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) { 
  openDoor2 = botDoorPath;
  openDoor3 = beachDoorPath;
  openDoor1 = spaceDoorPath;
} else { (choreDoor === 2)
  openDoor3 = botDoorPath;
  openDoor1 = beachDoorPath;
  openDoor2 = spaceDoorPath;
}
}

door1.onclick = () => {
  if(!isClicked(doorImage1)) {
  doorImage1.src = openDoor1;
  playDoor();
}
}

door2.onclick = () => {
  if(!isClicked(doorImage2)) {
  doorImage2.src = openDoor2;
  playDoor();
}
}

door3.onclick = () => {
  if(!isClicked(doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor();
}
}

const gameOver = (status) => {
  if (status === 'win') {
  startButton.innerHTML = 'You win! Play again?';
} 
}

randomChoreDoorGenerator()

Thanks again!

The error is not where you think it is. :slight_smile: Take a closer look at your isBot function. :wink:

Also, while it’s great that you’re formatting your code, the backticks need to be on a separate line. :slight_smile: Otherwise, they remove the first line of your code. (You can see how I’ve edited your posts to see what I mean. :slight_smile: )

Does the door need to be defined? Sorry, such a newbie :sweat_smile:

Nope, that’s not the issue. Is everything correct in how you’ve written that function? Is it a complete object, no dangling brackets or anything? :wink:

Oh my god :rofl: I’m dying, so obvious. Thank you once again!

1 Like

Sometimes the obvious ones are the hardest to spot. :smiley:

1 Like

I’m so sorry, I feel as though I’m beginning to bug you but would you be able to help me again? I’m not seeing an error code so I’m completely stumped. My start button isn’t changing to “you lose, play again” if the robot appears on the first or second click. I’m assuming there’s something wrong with the isBot or playDoor function?

const doorImage1 = document.getElementById('door1');
const doorImage2 = document.getElementById('door2');
const doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start');

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

let currentlyPlaying = true;

const isBot = () => {
  if(door.src === botDoorPath) {
    return true;
  } else {
    return false;
}
}

const isClicked = (door) => {
  if (door.src === closedDoorPath) {
  return false;
} else {
  return true;
}
}

const playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver('win');
} else if (isBot(door)) {
  gameOver('lose');
} 
}

const randomChoreDoorGenerator = () => {
 const choreDoor = Math.floor(Math.random() * numClosedDoors);
  if(choreDoor === 0) {
  openDoor1 = botDoorPath;
  openDoor2 = beachDoorPath;
  openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) { 
  openDoor2 = botDoorPath;
  openDoor3 = beachDoorPath;
  openDoor1 = spaceDoorPath;
} else { (choreDoor === 2)
  openDoor3 = botDoorPath;
  openDoor1 = beachDoorPath;
  openDoor2 = spaceDoorPath;
}
}

door1.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage1)) {
  doorImage1.src = openDoor1;
  playDoor(doorImage1);
}
}

door2.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage2)) {
  doorImage2.src = openDoor2;
  playDoor(doorImage2);
}
}

door3.onclick = () => {
  if(currentlyPlaying && !isClicked(doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor(doorImage3);
}
}

const gameOver = (status) => {
  if (status === 'win') {
  startButton.innerHTML = 'You win! Play again?';
} else {
  startButton.innerHTML = 'Game over! Play again?'
}
currentlyPlaying = false;
}

randomChoreDoorGenerator()

Thanks so much!

No worries.

If I run your code, I get this:

Uncaught ReferenceError: door is not defined
    at isBot (script.js:23)
    at playDoor (script.js:42)
    at HTMLImageElement.door1.onclick (script.js:68)

You’re missing a parameter in that function. :slight_smile:

Thank you, I really do appreciate your help. Could have sworn I entered that :roll_eyes: :blush:

1 Like