Building Interactive Javascript Websites: Project Chore Door

Hi,

I’m a little stuck on this project. I was hoping to get some help. Ive followed the steps all the way to the end but now when I click on a door, no open door image of any kind appears. My code was working correctly at step 45. Here is my 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 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'>
        
        <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>
    </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>

 doorImage1 = document.getElementById('door1');
 doorImage2 = document.getElementById('door2');
doorImage3 = document.getElementById('door3');

let startButton = document.getElementById('start');
let numClosedDoors = 3;
let currentlyPlaying = true;

let openDoor1;
let openDoor2;
let openDoor3;

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

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

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

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

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

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


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

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

    
  }
};

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

  
    
  }
  
  startButton.onclick = () => {
    if (!currentlyPlaying) {
    
    startRound();
  }
  }
  
  startRound = () => {
    numClosedDoors = 3;
    startButton.innerHTML = 'Good Luck!';
    currentlyPlaying = true;
    doorImage1.src = closedDoorPath;
    doorImage2.src = closedDoorPath;
    doorImage3.src = closedDoorPath;
    randomChoreDoorGenerator();
    
    
  }
  
  
  
};

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

startRound():

i ran the code on jsbin, given i can’t find the exercise (please share exercise url) and indicated an error here:

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

in the if condition, doesn’t the codecademy editor a warning? warning triangle or a cross to indicate the syntax error?

1 Like

Hi,

The project URL is" https://www.codecademy.com/paths/web-development/tracks/building-interactive-javascript-websites/modules/web-dev-interactive-websites/projects/chore-door"

thanks a lot for the reply. I have changed that and also startRound(): into startRound(); at the end of the javascript file, but still the same lack of functionality. No I received no error warning for that.

good change

in jsbin:

JS Bin - Collaborative JavaScript Debugging

the editor marks the mistake with red underline (just like the underline you get to see when you make a typo), if you then hover over it it says:

expected: '(' instead saw '!'

on this line:

if !(isClicked(doorImage1) && currentlyPlaying)
1 Like

Thank you for introducing me to JSbin. It’s very useful! I have used it to check all my work and do not get any more syntax errors, so I assume there is some semantic fault somewhere. Perhaps I am not passing the right arguments into a function. There is also I believe an error in the instructions to the exercise that may contribute to a mistake. On step 59 it mentions a playOver() function when I think they are still referring to the playDoor() function. I completed the exercise based on this assumption.

My code is now:

 doorImage1 = document.getElementById('door1');
 doorImage2 = document.getElementById('door2');
doorImage3 = document.getElementById('door3');

let startButton = document.getElementById('start');
let numClosedDoors = 3;
let currentlyPlaying = true;

let openDoor1;
let openDoor2;
let openDoor3;

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

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


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

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

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

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


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

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

    
  }
};

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

  
    
  }
  
  startButton.onclick = () => {
    if (!currentlyPlaying) {
    
    startRound();
  }
  }
  
  startRound = () => {
    numClosedDoors = 3;
    startButton.innerHTML = 'Good Luck!';
    currentlyPlaying = true;
    doorImage1.src = closedDoorPath;
    doorImage2.src = closedDoorPath;
    doorImage3.src = closedDoorPath;
    randomChoreDoorGenerator();
    
    
  }
  
  
  
};

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

startRound();

a JSlinter might be even better. Anyway, let me have a look at why its still not working

the browser console also gives syntax error, you might want to used to this inside a project where you work with html to catch syntax error.

you can google how to get access to the browser console

1 Like

my console gives me the following error:

ReferenceError: startRound is not defined script.js:132:1

Given the the startRound function does exist ( i see it in your code), you might have a scope problem. Looking at the instructions:

Create this new startRound() function after the .onclick functions

and then compare this to your code, i see that startRound function is not after the onclick functions.

1 Like

Thank you for the reply. I have done that. Unfortunately still no success. I will keep playing around with it.

Hi, I am using the browser console now. Thanks for pointing me to that. I have put the function declaration before any calling of the method. but still get reference errors for startRound() and isClicked(), when I have declared it before calling it anywhere. As an aside, is it just my javascript file that is buggy? Is my HTML file ok?

Thank you.

can you post an updated version of your code? Given you made changes

1 Like

Sure.

let doorImage1 = document.getElementById("door1");
 let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");


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

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

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


let startButton = document.getElementById("start");
let numClosedDoors = 3;
let currentlyPlaying = true;

let openDoor1;
let openDoor2;
let openDoor3;

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

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


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


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

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

    
  }
};

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

  
    
  }
  
    const startRound = () => {
    numClosedDoors = 3;
    startButton.innerHTML = "Good Luck!";
    currentlyPlaying = true;
    doorImage1.src = closedDoorPath;
    doorImage2.src = closedDoorPath;
    doorImage3.src = closedDoorPath;
    randomChoreDoorGenerator();
    
    
  }
  
  
  startButton.onclick = () => {
    if (!currentlyPlaying) {
    
    startRound();
  }
  }
  

  
  
};

const gameOver = (str) => {
  if (str === "win") {
    startButton.innerHTML = "You win! Play again?";
  }
  else {
    startButton.innerHTML = "Game Over! Play again?";
  }
  currentlyPlaying = false;
}

startRound();
body {
  background-color: #010165;
  margin: 0px;
}

.header {
  background-color: #00ffff;
  text-align: center;
}

.title-row {
  margin-top: 42px;
  text-align: center;
  margin-bottom: 21px;
}

.instructions-title {
   display: inline;
   font-size:18px;
   color: red;
  font-family: 'Work Sans';
}

.instructions-row {
  margin: 20px auto;
  width: 400px;
}

.instructions-number {
  padding-right: 25px;
  font-family: 'Work Sans';
  font-size: 36px;
  color: #ffffff;
}

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

  
 
}
<!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 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'>
        
        <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>
    </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>

your startRound function is still nested inside the onclick function of doorImage3. Which isn’t right

the function should be declared after the onclick functions

1 Like

A post was split to a new topic: Chore door