Chore Door Project Issues: Step 45, Doors No Longer Open

Hey!

So, I’ve been working on the Chore Door project and had it going pretty smoothly up until I reached Step 45. At this point, after we have written the logic so the ChoreBot randomizes its position, my doors no longer react to the click events and stay closed.

I’ve gone over my code numerous times, moved a few functions around, and even rewrote parts of the JS code that were working fine before to match the video walkthrough after I couldn’t find the issue myself.

If anyone could give my code a second look and help me figure out what’s wrong, I’d greatly appreciate it! Thank you!

HTML Code:

!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://content.codecademy.com/projects/chore-door/images/logo.svg>
    </div>
    <div class="title-row">
      <img src= https://content.codecademy.com/projects/chore-door/images/star.svg>
      <p class="instructions-title">Instructions</p>
      <img src= https://content.codecademy.com/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://content.codecademy.com/projects/chore-door/images/closed_door.svg>
      <img id="door2" class='door-frame' src=https://content.codecademy.com/projects/chore-door/images/closed_door.svg>
      <img id="door3" class='door-frame' src=https://content.codecademy.com/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>

CSS Code:

body {
  background-color: #010165;
  margin: 0px;
}

.header {
  background-color: #00ffff;
  text-align: center;
}

.title-row {
  margin-top: 42px;
  margin-bottom: 21px;
  text-align: center;
}

.instructions-title {
  display: inline;
  font-size: 18px;
  color: #00ffff;
  font-family: 'Work Sans';
}

.instructions-row {
  margin: 0 auto;
  width: 400px;
}

.instructions-number {
  padding-right: 25px;
  font-family: 'Work Sans';
  font-size: 36px;
  color: #00ffff;
}

.instructions-text {
  padding: 10px;
  font-family: 'Work Sans';
  font-size: 14px;
  color: #ffffff;
}

.door-row {
  text-align: center;
}

.door-frame {
  cursor: pointer;
  padding: 10px;
}

.start-row {
  margin: auto;
  width: 120px;
  height: 43px;
  font-family: 'Work Sans';
  background-color: #eb6536;
  padding-top: 18px;
  font-size: 18px;
  text-align: center;
  color: #010165;
  margin-bottom: 21px;
  cursor: pointer;
}

JS Code:

let doorImage1
= document.getElementById('door1');

let doorImage2
= document.getElementById('door2');

let doorImage3
= document.getElementById('door3');

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

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

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

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const randomChoreDoorGenerator = () => {
choreDoor 
 = Math.floor((Math.random() *          numClosedDoors));
 if (choreDoor === 0) {
   openDoor1 = borDoorPath;
   openDoor2 = beachDoorPath;
   openDoor3 = spaceDoorPath;
 }
 else if (choreDoor === 1) {
  openDoor1 = beachDoorPath;
  openDoor2 = borDoorPath;
  openDoor3 = spaceDoorPath;
 }
 else if (choreDoor ==== 2) {
   openDoor1 = beachDoorPath;
   openDoor2 = spaceDoorPath;
   openDoor3 = borDoorPath;
 }
 else {
   document.body.style.backgroundColor = 'red';
 }
};

door1.onclick = () => {
doorImage1.src = openDoor1;
}
door2.onclick = () => {
doorImage2.src = openDoor2;
}
door3.onclick = () => {
doorImage3.src = openDoor3;
}

randomChoreDoorGenerator();

I should add that I added the extra “else” statement in the “if/else if/else” portion of the JS code as a sort of error troubleshooting measure since I can’t console.log to check if the ChoreDoorGenerator is working… is it possible that’s causing the issue?

Okay, I figured it out! I’ll just post my troubleshooting here in case anyone else has a similar issue.

As always, it was just a series of simple typos tripping me up!

In my randomChoreDoorGenerator() function, botDoorPath was misspelled as borDoorPath.

For my final else if statement, I accidentally had 4 equals signs instead of 3.

I also removed the final else statement, but I do not know if that had any impact on it working or not.

But yeah, whenever it feels like you’re just banging your head against a wall, treat your code like an english paper and check your spelling!

Glad you figured out what was wrong with your code. I am having the same problem and I can’t find any typos. I will post my code down below just in case anyone can find anything. Thanks in advance!

Hey, I am just struggling too at this point. While going through your code I noticed that your function randomChoreDoorGenerator is defined as a const but ChoreDoor isn’t. Maybe that’s the issue

const doorImage1 = document.getElementById('door1');

const doorImage2 = document.getElementById('door2');

const doorImage3 = document.getElementById('door3');

let openDoor1;
let openDoor2;
let openDoor3;

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

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

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

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

const startButton = document.getElementById('start');

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

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

randomChoreDoorGenerator = () => {
  const numClosedDoors = 3;
  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 {
    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();
}}

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

Jumping onboard the topic.

I haven’t made any changes to the HTML or CSS in about 25 steps according to the duplicates of my work in my VS Code, so since it was working before the implementation of playDoor(); and .isClicked(), I’ve only included my javaScript here.

Any directional pointing or help that can get these funcitons working for me would be greatly appreciated.

Shouldn’t your functions have a variable type declared?

i.e,

isClicked = (door) => {

should be

const isClicked = (door) => {

etc.

You have one typo!

2023-10-21_18-07-12

Fix that right there and your code works fine.

I have tested your code.