Chore door


#1

my code should change the ‘Good Luck’ button to ‘You win! play again?’ if three doors are opened, but its not doing so. can any of you guys help me to figure it out.? :slight_smile:
my html code:

<!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>
    <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>

my javascript 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 closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg"
let startButton = document.getElementById("start");
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

const playDoor = () => {
 numClosedDoors--;
 if (numClosedDoors===0) {
   gameOver("win")}
 };
const isClicked = (door) => {
 if (door.src===closedDoorPath) {
   return false;
 }else {
   return true;
 }
};

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?";
  }
}
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{
    openDoor3=botDoorPath;
    openDoor2=beachDoorPath;
    openDoor1=spaceDoorPath;
  }
}
randomChoreDoorGenerator();


#2

The majority of your code works, there are just a few “spelling” mistakes. Remember that variable and function names are case sensitive.

Both need to be the same ex: gameOver

Same thing with these.


#3

thanks a lot for your support…


#4

Aside

There are four objects on this page we are at times able to click on and expect a response. Getting to the bottom of this is the real purpose of this exercise. Owing that we can see all the objects in the page at load time, it makes perfect sense to put all the caching statements at the top of our code.

Add to this, we don’t want our program to change these bindings so they deserve to be const, not let.