Chore Door Project. Step 45. Doors change to question marks

Hi Everyone,

since many days I struggle with the step number 45 of the project.
Till that point all looked OK but then when I clicked on the doors, they changed to a question mark instead of showing the expected picture.
I watched the introduction movie few time and compared my code, but I can not find any mistake :sob:
I would appreciate if someone could help.

My code is as follows:
JavaScript

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 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if(chooreDoor === 1){
    openDoor2 = botDoorPath;
    openDoor3 = beachDoorPath;
    openDoor1 = spaceDoorPath;
  } else { (chooreDoor === 2)
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
};

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

randomChoreDoorGenerator();

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://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

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;
  }

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

  .door-row{
    text-align: center;
  }
 .door-frame {
    cursor: pointer;
    padding: 10px;
  }

Hi @angelinathalmann
have a look what the console says: Can't find variable: chooreDoor".
That should make it easy to find the error.

Hi @mirja_t ,

thanks a lot for the hint!

Now it works:

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

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";

numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

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

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

randomChoreDoorGenerator();

1 Like