Chore Door - Open door images don't load (after steps 63-65)


#1

Hi,

When I click the closed doors, the open door images don’t load. From what I noticed, this happened between steps 63-65…

Where is my mistake?

I didn’t make step 70 yet…

Thank you.

//STEP 7
let doorImage1 = document.getElementById('door1');
//STEP 15
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

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

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

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

//STEP 38
let numClosedDoors = 3;

//STEP 40
let openDoor1;
let openDoor2;
let openDoor3;

//STEP 51
let closedDoorPath ="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";

//STEP 55
const startButton = document.getElementById('start');

//STEP 63
const currentlyPlaying = true;


// end of global variables


//STEP 58
const isBot = (door) =>{
  if(door.src === botDoorPath){
    return true;
  }
  else {
    return false;
  }
}


//STEP 50
const isClicked = (door) =>{
  //STEP 52
  if(door.src===closedDoorPath){
    return false;
  }
  else{
    return true;
  }
}


//STEP 46
const playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
  gameOver('win');
}
  else if(isBot(door)===true){
    gameOver();
  }
}


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


//STEP 8
if(!isClicked(doorImage1)) {
 if(currentlyPlaying && !isClicked(door1)){
	door1.onclick = () => {
  //STEP 10
  	doorImage1.src = openDoor1;
  //STEP 49
  	playDoor(door1)
	}
  //STEP 65
 }
};
  
//STEP 16
if(!isClicked(doorImage2)) {
 if(currentlyPlaying && !isClicked(door2)){
	door2.onclick = () => {
  //STEP 19
 		doorImage2.src = openDoor2;
  //STEP 49
  	playDoor(door2)
  }
  }
};

if(!isClicked(doorImage3)) {
  if(currentlyPlaying && !isClicked(door3)){
	door3.onclick = () => {
 //STEP 19
  	doorImage3.src = openDoor3;
  //STEP 49
  	playDoor(door3)
  }
  }
};



//STEP 67
 const startRound = () =>{
   numClosedDoors = 3;
   doorImage.src = closedDoorPath;
   startButton.innerHTML = 'Good luck!';
   currentlyPlaying = true;
   randomChoreDoorGenerator()
 } 
  
 
//STEP 66
  startButton.onclick = () =>{
    startRound();
  }

  
//STEP 54
const gameOver = (status) =>{
  if(status==='win'){
    startButton.innerHTML = 'You win! Play again?';
  }
  //STEP 62
  else{
     startButton.innerHTML = 'Game Over! Play again?';
  }
  //STEP 64
  currentlyPlaying = false;
};


//STEP 45
//randomChoreDoorGenerator();

//STEP 69
 startRound();


#2
//STEP 67
 const startRound = () =>{
   numClosedDoors = 3;
   //randomChoreDoorGenerator();
   //doorImage.src = closedDoorPath;       <-- i guess this has to set the image of the closed doors but the variable doorImage is nowhere defined. 
   startButton.innerHTML = 'Good luck!';
   //currentlyPlaying = true;				<-- a constant is not allowed to change during runtime atleast not directly. this will give you an error.
   randomChoreDoorGenerator();			// <-- because of the errors that are given above, this function whas never run. thats why the image source could not be loaded.
 } 
  
 
//STEP 66
  startButton.onclick = () =>{
    startRound();
  }

  
//STEP 54
const gameOver = (status) =>{
  if(status==='win'){
    startButton.innerHTML = 'You win! Play again?';
  }
  //STEP 62
  else{
     startButton.innerHTML = 'Game Over! Play again?';
  }
  //STEP 64
  // currentlyPlaying = false; <-- this will also throw an error since it is a constant.
};

Hello,

I commented in the code where it go’s wrong and why.

hope it helps.


#3

Thank you, biirra! I read your comments and it is working now! Thank you!


#4

I also had to change the three door element .onclick() functions, because the if conditions were incorrectly positioned. Now they are working as they should.

door1.onclick = () => {
    if(currentlyPlaying && !isClicked(door1)){
  	  doorImage1.src = openDoor1;
  	  playDoor(door1)
    }
};
  

door2.onclick = () => {
     if(currentlyPlaying && !isClicked(door2)){
       doorImage2.src = openDoor2;
       playDoor(door2)
     }
};

door3.onclick = () => {
     if(currentlyPlaying && !isClicked(door3)){
  	   doorImage3.src = openDoor3;
  	   playDoor(door3)
     }
};