ChoreDoor (step45)

Hello, i am having problems in this project, my code at this point is supposed to randomly change the pictures when the door is clicked, but so far they don’t change, it is always the same position of the robot, the beach and the space, please help

<!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://content.codecademy.com/projects/chore-door/images/logo.svg">
    </div>
    
    <div class="title-row">
      <img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
      <p class="instructions-title">Instructions</p> 
      <img src="https://content.codecademy.com/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://content.codecademy.com/projects/chore-door/images/closed_door.svg">
      <img id= "door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
      <img id= "door3" class="door-frame" src="https://content.codecademy.com/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>

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

.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;
}
//global variables
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

let botDoorPath = "https://content.codecademy.com/projects/chore-door/images/robot.svg"
let beachDoorPath= "https://content.codecademy.com/projects/chore-door/images/beach.svg"
let spaceDoorPath="https://content.codecademy.com/projects/chore-door/images/space.svg"

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

//to assign the bot to different doors

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

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

randomChoreDoorGenerator();

link= https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

Hi!

Take a look at the else/if block in your randomChoreDoorGenerator.

Specifically the path you are assigning to each door. At the moment you have set them to be the same for every possible outcome.

hi again, i am almost there but when i call currentlyPlaying = false; the doors won’t “open” it doesn’t send me a traceback error

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

let botDoorPath = 'https://content.codecademy.com/projects/chore-door/images/robot.svg'
let beachDoorPath= "https://content.codecademy.com/projects/chore-door/images/beach.svg"
let spaceDoorPath="https://content.codecademy.com/projects/chore-door/images/space.svg"
let closedDoorPath = 'https://content.codecademy.com/projects/chore-door/images/closed_door.svg'

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

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

let currentlyPlaying = true;

//if the user choses the door with the robot
const isBot = (door) => {
  if (door.src = botDoorPath) {
    return true
  } else {
    return false
  }
}

//to determine if a door has been clicked
const isClicked = (door) => {
  if (door.src = closedDoorPath) {
    return false
  } else {
    return true
  }
}

//to decrease the humber of doors after each click
const playDoor = () => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver();
  } else if (isBot(door)) {
    gameOver();
  }
}

//to assign the bot to different door
let = randomChoreDoorGenerator= () => {
  let choreDoor = Math.floor(Math.random()*numClosedDoors);
  if (choreDoor === 0){
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if (choreDoor === 1){ 
    openDoor1 = spaceDoorPath;
    openDoor2 = botDoorPath;
    openDoor3 = beachDoorPath;
  } else {
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = botDoorPath;
    }
}

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

const startButton = () => {
  numClosedDoors = 3;
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  startButton.innerHTML = 'Good luck';
  currentlyPlaying = true;
} 

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

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

gameOver('win');
startRound();
<!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://content.codecademy.com/projects/chore-door/images/logo.svg">
    </div>
    
    <div class="title-row">
      <img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
      <p class="instructions-title">Instructions</p> 
      <img src="https://content.codecademy.com/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://content.codecademy.com/projects/chore-door/images/closed_door.svg">
      <img id= "door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
      <img id= "door3" class="door-frame" src="https://content.codecademy.com/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>

When we wish to make a comparison of identity we use ===. The = operator is for assignment, only.

1 Like

Unless I’m misunderstanding you, that is the desired behaviour for the currentlyPlaying variable. When it is equal to false, doors should no longer be opened.

It should be assigned the value true when you create the variable and then game logic will change it as required.