Chore Door

Hello Everyone, I got stuck in a guided project and was hoping to get some help. I tried to follow the instructions precisely, but at certain point when testing my code I realized that I could no longer open the doors. According to visual studio code there is no apparent bug and when I run the code on the console it returns this: " JavaScript error: TypeError: null is not an object (evaluating ‘doorImage1.onclick = () => { if (!isClicked(doorImage1)) { doorImage1.src = openDoor1; playDoor(); } }’) on line 64" I have tried a lot of things but I can’t fix this by myself. I would appreciate any help.

Here is my code:

const doorImage1 = document.querySelector('#door1');
const doorImage2 = document.querySelector('#door2');
const doorImage3 = document.querySelector('#door3');

const beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
const botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';

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

const numClosedDoors = 3;

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

let openDoor1;
let openDoor2;
let openDoor3;
let startButton = document.querySelector('#start');


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

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

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

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

doorImage1.onclick = () => {
  if(!isClicked(doorImage1)) {
  doorImage1.src = openDoor1;
   playDoor();
  }
};
doorImage2.onclick = () => {
if(!isClicked(doorImage2)) {
  doorImage2.src = openDoor2;
  playDoor();
}
};
doorImage3.onclick = () => {
  if(!isClicked(doorImage3)) {
  doorImage3.src = openDoor3;
  playDoor();
  }
};

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

randomChoreDoorGenerator();

Can you also provide your full html code?

I don’t get the same error (different editor maybe?), anyway, this comparison:

f (door === closedDoorPath)

is flawed. You are comparing the whole image element (door) with a string (closedDoorPath). That is never going to match, go ahead and log the values you used in the comparison if you want.

What should be compared in that if condition?

1 Like

Sure, here is my entire html

<!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 class="start-row" id="start">Good luck!</div>
<script type="text/javascript" src="./script.js"></script>
  </body>
</html>

I formatted your code. If you post html without following the guidelines here: How do I format code in my posts?, the forums’ Markdown renders the html instead of displaying the code.

1 Like

Thank you, sorry I will follow them from now on.

1 Like

Have you addressed the bug that @stetim94 pointed out?

1 Like

yes, actually that was the issue I guess. Thank you to both of you.

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.