Need help with chore door. Doors are disappaering!

Get Help JavaScript
#1

Hello, I am having trouble doing the chore door. When I click on the doors disappear
Below is my js code,

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

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

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

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

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

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

let numClosedDoors= 3;

let openDoor1;

let openDoor2;

let openDoor3;

const radomChoreDoorGenerator=()=>{

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 { (choreDoor===2)

openDoor3=botDoorPath;

openDoor1=beachDoorPath;

openDoor2=spaceDoorPath;

}

}

door1.onclick = () => {

  doorImage1.src=openDoor1;

}

door2.onclick = () => {

 doorImage2.src=openDoor2;

}

door3.onclick = () => {

 doorImage3.src=openDoor3;

}

randomChoreDoorGenerator();

here is what I get after click on the door

Capture
Capture566×761 51.1 KB

#2

This project can be hard to do, since there is no built in console to check for errors.

Thankfully though you can still use the developer tools console:

Screenshot 2020-09-21 at 16.06.05
Screenshot 2020-09-21 at 16.06.051366×768 164 KB

The error reads:

Uncaught ReferenceError: randomChoreDoorGenerator is not defined
    at script.js:75

Try checking your spelling were you declared this function.

1 Like
#3

It was spelled wrong thank you so much for the help!

1 Like
#4

Hi I’m having the same problem but its not the spelling, I have checked everything. What am I missing?

#5

Could you post your code?

#6

let doorImage1=document.getElementById(‘door1’);

let doorImage2=document.getElementById(‘door2’);

let doorImage3=document.getElementById(‘door3’);

let startButton=document.getElementById(‘start’);

let botDoorPath=“https://content.codecademy.com/projects/chore-door/images/beach.svg”;

let beachDoorPath=“https://content.codecademy.com/projects/chore-door/images/space.svg”;

let spaceDoorPath=“https://content.codecademy.com/projects/chore-door/images/robot.svg”;

let closedDoorPath =“https://content.codecademy.com/projects/chore-door/images/closed_door.svg”;

let numClosedDoors = 3;

let openDoor1;

let openDoor2;

let openDoor3;

const isClicked = (door) => {

if (door.src === closedDoorPath) {

return false;

} else {

return true;

}

}

const playDoor = () => {

numClosedDoors–;

if (numClosedDoors === 0) {

gameOver(‘win’);

}

}

const randomChoreDoorGenerator = () => {

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 { (choreDoor === 2)

openDoor3 = botDoorPath;

openDoor1 = beachDoorPath;

openDoor2 = spaceDoorPath;

}

}

door1.onclick = () => {

if(!isClicked(doorImage1)){

doorImage1.src=openDoor1;

playDoor();

}

}

door2.onclick = () => {

if(!isClicked(doorImage2)){

doorImage2.src=openDoor2;

playDoor();

}

}

door3.onclick = () => {

if(!isClicked(doorImage3)){

doorImage3.src=openDoor3;

playDoor();

}

}

const gameOver = (status) => {

if(status===‘Win’){

startButton.innerHTML=‘You Win! Play Again?’;

}

}

randomChoreDoorGenerator();let doorImage1=document.getElementById(‘door1’);
let doorImage2=document.getElementById(‘door2’);
let doorImage3=document.getElementById(‘door3’);
let startButton=document.getElementById(‘start’);
let botDoorPath=“https://content.codecademy.com/projects/chore-door/images/beach.svg”;
let beachDoorPath=“https://content.codecademy.com/projects/chore-door/images/space.svg”;
let spaceDoorPath=“https://content.codecademy.com/projects/chore-door/images/robot.svg”;
let closedDoorPath =“https://content.codecademy.com/projects/chore-door/images/closed_door.svg”;
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const isClicked = (door) => {
if (door.src === closedDoorPath) {
return false;
} else {
return true;
}
}

const playDoor = () => {
numClosedDoors–;
if (numClosedDoors === 0) {
gameOver(‘win’);
}
}

const randomChoreDoorGenerator = () => {
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 { (choreDoor === 2)
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;

}

}

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

const gameOver = (status) => {
if(status===‘Win’){
startButton.innerHTML=‘You Win! Play Again?’;
}
}

randomChoreDoorGenerator();

#7

It seems like you’ve posted your code twice here. Currently I’m basing any answers off of your code posted up until your first call to randomChoreDoorGenerator().
Also I’m not sure what step you have gone up to since you don’t have a lot of the code for later steps included yet.

That being said there are a few things I am seeing.

First off as I mentioned in my earlier post:

Take a look here, there are two errors thrown one of which is related to spelling.
Second I saw, which the console isn’t going to catch for you unless you use some console.log()s is your control if someone won. In gameOver() someone wins if status is passed to it as 'Win', but take a look at what argument you are currently passing to it:

Something to pay close attention to because JavaScript is a case sensitive language:

>>> console.log("win" === "Win");
false

Remember console.log() is a good friend when debugging, often if you are stuck throwing a few out there and seeing when or what they print out will help you see how your code is flowing.

1 Like
#8

Thanks 8-bit-gaming, I changed the cap W to a lowercase w it all works now.

#9

So I spoke to soon, because now its not working every time I refresh, but it doe’s every other time I refresh.

#10

Have you checked the console for errors? If there are any what are they?

Could you post your code again so I can see were your at?

#11

Hello Shaylin, here is a copy of my latest code, so its kinda working but now when I click on any door it give the wrong answer. And the images are not rotating and changing.
let doorImage1=document.getElementById(‘door1’);

let doorImage2=document.getElementById(‘door2’);

let doorImage3=document.getElementById(‘door3’);

let startButton=document.getElementById(‘start’);

let botDoorPath=“https://content.codecademy.com/projects/chore-door/images/beach.svg”;

let beachDoorPath=“https://content.codecademy.com/projects/chore-door/images/space.svg”;

let spaceDoorPath=“https://content.codecademy.com/projects/chore-door/images/robot.svg”;

let closedDoorPath =“https://content.codecademy.com/projects/chore-door/images/closed_door.svg”;

let numClosedDoors = 3;

let openDoor1;

let openDoor2;

let openDoor3;

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

}

}

const randomChoreDoorGenerator = () => {

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 { (choreDoor === 2)

openDoor3 = botDoorPath;

openDoor1 = beachDoorPath;

openDoor2 = spaceDoorPath;

}

}

door1.onclick = () => {

if(!isClicked(doorImage1)){

doorImage1.src=openDoor1;

playDoor(door1);

}

}

door2.onclick = () => {

if(!isClicked(doorImage2)){

doorImage2.src=openDoor2;

playDoor(door2);

}

}

door3.onclick = () => {

if(!isClicked(doorImage3)){

doorImage3.src=openDoor3;

playDoor(door3);

}

}

const gameOver = (status) => {

if(status===‘win’){

startButton.innerHTML=‘You win! Play again?’;

} else {

startButton.innerHTML = ‘Game over! Play again’

}

}

randomChoreDoorGenerator();

#12

Are you sure this is the same code you are working on? It currently contains a couple errors that crash it before you do anything. I recommend checking your console as these errors are already listed. Here is one of the errors thrown.

Uncaught SyntaxError: script.js:53
Unexpected token ';'

As for the images not changing correctly take a look at you if/else if/else block controlling which doors are which. Specifically the else:

} else { (choreDoor === 2)

Currently it looks like you are trying to supply a condition to your else.