Chore Door

I was doing https://www.codecademy.com/courses/build-interactive-websites/projects/chore-door . But my code is not working properly it does not start another round when I click on the start button and it also doesn’t stop the game when it catches the chore bot on the first or second door.
Javascript

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let currentlyPlaying = true;
let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
let openDoor1;
let openDoor2;
let openDoor3;
let startButton = document.getElementById("start");
let numClosedDoors =3;
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 isBot = (door) =>{
  if(door.src === botDoorPath){
    return true;
  }
  else return false;
}
let isClicked = (door) => {
  if(door.src === closedDoorPath)
  {
    return false;
  }
  else {return true;}
}
let playDoor = (door) => {
  numClosedDoors--;
  if(numClosedDoors===0)
  {
    gameOver('win');
  }
  else if(isBot(door)){
    gameOver();
  }
}
let randomChoreDoorGenerator = () => {
  let 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;

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

}}
if(currentlyPlaying && !isClicked(doorImage2)){
doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
  playDoor(doorImage2);
}}
if( currentlyPlaying && !isClicked(doorImage3)){
doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
  playDoor(doorImage3);
  
}}
let startRound = () => {
  numClosedDoors = 3;
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  startButton.innerHTML = 'Good luck!';
  currentlyPlaying = true;
  randomChoreDoorGenerator();
}
if(currentlyPlaying === false){
startButton.onclick = () => {
  startRound();
}
}
let gameOver = (status) =>{
  if(status === 'win')
  {
    startButton.innerHTML = "You win! Play Again?";
  }
  else{
    startButton.innerHTML = "Game over! Play Again?";
  }
  currentlyPlaying =false;
}
startRound();

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;
    color:#00ffff;
    font-family:'Work Sans';
  }
  .instructions-text{
    padding:10px;
    font-family: 'Work Sans';
    font-size:14px;
    color:#ffffff;
  
  }
  .door-row{
    text-align:center;
  }
  .door-frame{
    cursor: pointer;
    padding: 10px;
    
    
  }
  .start-row{
  margin : auto;
  width : 120px;
  height : 43px;
  font-family : ‘Work Sans’;
  background-color : #eb6536;
  padding-top : 18px;
  font-size : 18px;
  text-align : center;
  color : #010165;
  margin-bottom : 21px;
  cursor : pointer;
  }

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

Hi there, welcome to the forums.

You’ve got a couple of things the wrong way around when it comes to your onclick events for the doors, and the start button.

For example:

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

Your global variable currentlyPlaying is set to true from the outset, so this code block never runs. As a result, the startButton element never gets assigned an event handler function for the onclick event.

The structure of that block is wrong. :slight_smile:

You’ve made similar errors around assigning the onclick handlers for the doorImage objects too. :slight_smile:

But I have assigned currentlyPlaying to false in gameover function.

Please see it again.

Yes, but that block of code I referred to previously exists on it’s own in the global scope.

JavaScript will evaluate it once, when your script first runs, and will never revisit it. As a result, your “startButton” element never gets an onclick handler so clicking it will never do anything. :slight_smile:

As I said previously, you have got the logic here backwards. The startButton element should always have an event handler, because it’s meant to be clickable - so the assignment of the function should not depend on any condition.

Whether or not your onclick function does anything, that does depend on some conditions.

I can’t be any more specific without correcting the code for you, which rather defeats the purpose. :slight_smile:

Thank you very much. I have solved the issue.

1 Like

Glad to hear it. :slight_smile:

If you get stuck with anything else, come back and we’ll see if we can help out. :smiley: