Building Interactive Javascript Websites: Project Chore Door


#1

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():

#2

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?


#3

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.


#4

good change

in jsbin:

http://jsbin.com/honareromi/edit?js

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)

#5

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

#6

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


#7

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.


#8

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


#9

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.


#10

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


#11

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>


#12

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


#15

A post was split to a new topic: Chore door