All Doors Locked

So I am not sure why but, now none of my doors seem to be opening. I am sure it is a typo some where and could use a fresh set of eyes. Please somebody take a look and let me know what you see.

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">
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <header>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </header>
    
    <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 class="door-frame" id="door1" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door2" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door3" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
    
    <div class="start-row" id="start">Good luck!</div>
  </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;
}

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

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

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

JS

// Door Image Paths

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

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.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;

// Open Door Variables

let openDoor1;
let openDoor2;
let openDoor3;

let currentlyPlaying = true;

// Functions

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

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 = door => {
  numClosedDoors--;
    if (numClosedDoors === 0) {
      gameOver('win');
    } else if (isBot(door)) {
      gameOver('lose');
    }
}

// Generator Function

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

// Door Click Functions

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

startButton.onclick = () => {
  if(!currentlyPlaying) {
    startRound();
  }
}

const startRound = () => {
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}

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

startRound();

the first logic step is then check the console (f12, then console tab) and check for any errors:

Uncaught ReferenceError: door1 is not defined at script.js:70

okay, that narrows it down to this line:

door1.onclick = () => {

where should this door1 variable be defined?

@stetim94 points out an error that should be fixed but does not influence running the script due to our modern browsers. See the following topic on this.

The reason why your doors are not opening lies in the randomChoreDoorGenerator.
It cannot open any door because the if ... if else statement has to work with an undefined as a value to choreDoor.

See if you can spot the error in the following line of code:

Hope this helps :wink: Happy Coding!

First thank you for taking the time to look over my code and I think I caught what you were talking about. I was missing the () after the Math.random part. However I fixed that, and it is still not working. Is that correct?

Now I did notice this when I was trying to figure out what was going on with it on my own. I took a look at the pre-finished project that you are given a link to at the beginning. I started to go line by line through the source code and well once again I couldn’t find any differences other than the score keeper at the bottom. I then copied and pasted all of the code from the source page into my code editor to see if I could figure anything out.

What I noticed was that for some reason if I removed the code just for the score keeper at the bottom of the page, the pre-finished one acted the same way as my original code. I found this interesting and I don’t know if it will be any help to any of you trying to help me. However I thought it was worth mentioning.

I hope the added information will be of some use and thanks again for your help.

what about what i posted? About your undefined variable?

I was going to try it, but then realized that it is defined when I created the global variables.

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

That is weird, when you created the topic you posted the following:

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

which differs from which you reply now

i recommend you to take a good look if all the variable names are correct.

If so, and you still need help, please post an updated version of your code, who knows, maybe a different error?

I also highly recommend to use the console and/or the debugger to debug

Yeah I guess I changed it afterwards when I was trying to figure it out and forgot about it. Sorry about that.

That is alright, no need to apologize. Trying to understand why something doesn’t work and making changes is a good thing :slight_smile:

but like i said, if you need more help, i would appreciate a full version of your updated JS code.

Okay so I tried to address that, but to no avail. Here is my up to date 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">
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <header>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </header>
    
    <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 class="door-frame" id="doorImage1" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="doorImage2" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="doorImage3" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
    
    <div class="start-row" id="start">Good luck!</div>
  </body>
</html>

JS

// Door Image Paths

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

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.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;

// Open Door Variables

let openDoor1;
let openDoor2;
let openDoor3;

let currentlyPlaying = true;

// Functions

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

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 = door => {
  numClosedDoors--;
    if (numClosedDoors === 0) {
      gameOver('win');
    } else if (isBot(door)) {
      gameOver('lose');
    }
}

// Generator Function

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

// Door Click Functions

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

startButton.onclick = () => {
  if(!currentlyPlaying) {
    startRound();
  }
}

const startRound = () => {
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}

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

startRound();

funny, if i try to run your code on jsbin, everything goes fine:

https://jsbin.com/mekewixaza/edit?html,js,output

maybe the lesson doesn’t appreciate what you named the variable?

the lesson does:

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

maybe door1 is expected as id for the html element? Could be due to the exercise validition

That’s interesting because when I put it in a code editor and save it and then try running it in Chrome it does the exact same thing.

i would recommend you to stick to variable names and ids suggested by the project, see if that works

anyway, the most important thing is you understand, which seems to be the case :slight_smile:

But why won’t will it only work in jsbin and none of the browsers I have. I tried Chrome, Firefox, and Safari. And it acts the same way in all of them. It makes me worried that if I try implement any of these kinds of things in one of my own sites that it will act the same way.

Can i get the latest version of your code? Just to be absolute certain

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">
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <header>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </header>
    
    <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 class="door-frame" id="door1" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door2" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door3" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
    
    <div class="start-row" id="start">Good luck!</div>
  </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;
}

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

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

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

JS

// Door Image Paths

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

let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.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;

// Open Door Variables

let openDoor1;
let openDoor2;
let openDoor3;

let currentlyPlaying = true;

// Functions

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

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 = door => {
  numClosedDoors--;
    if (numClosedDoors === 0) {
      gameOver('win');
    } else if (isBot(door)) {
      gameOver('lose');
    }
}

// Generator Function

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

// Door Click Functions
doorImage1.onclick = () => {
    if(currentlyPlaying && !isClicked(door1)) {
    door1.src = openDoor1;
    playDoor(door1);
  }
}
doorImage2.onclick = () => {
  if(currentlyPlaying && !isClicked(door2)) {
    door2.src = openDoor2;
    playDoor(door2);
  }
}
doorImage3.onclick = () => {
  if(currentlyPlaying && !isClicked(door3)) {
    door3.src = openDoor3;
    playDoor(door3);
  }
}

startButton.onclick = () => {
  if(!currentlyPlaying) {
    startRound();
  }
}

const startRound = () => {
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}

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

startRound();

works fine, but like i said before, this might be problematic within the project. This could be caused by using different id values

For you, where does this code work? In jsbin? But not in the lesson?

I can only get it to work in jsbin. I can’t get it to work in the lesson and if put the code in a code editor, save it, and open it in a web browser it doesn’t work there either.

There are still remnants of door1, door2 and door3 variables. Better check your code for those.

1 Like

Are you talking about on the click functions?