Chore Door Project: Stuck at Step 45

Projects
1

Hello, I was going through the project smoothly until I started writing the function, I had hoped my website would work as intended once I finished writing the function. I have checked for typos, the order of declarations, even went across my code step by step with the provided tutorial. However, when I click on the doors (having already called the function), the image doesn’t change, it’s just the door image showing up. Here’s my code :

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

Javascript

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

const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"
const beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
const spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/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 = botDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = beachDoorPath;
  } else if (choreDoor === 1) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  }else (choreDoor === 2){
    openDoor3 = botDoorPath;
    openDoor1 = spaceDoorPath;
    openDoor2 = beachDoorPath;
  }
}
doorImage1.onclick = () => {
  doorImage1.src = openDoor1;
}
doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
}
doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
}
randomChoreDoorGenerator();```
3 Likes
2

You used double equal signs.

You put 3 ` there .

Hope this helps :grinning:

2 Likes
3

@lolfail Thanks for replying, I fixed the typos but it’s still not working.

2 Likes
4

You didn’t define choreDoor

Hope this helps :grinning:

3 Likes
5

Thanks! That solved it.

2 Likes