JavaScript Interactive Websites Chore Door

Language Help JavaScript
1

Hello i’m busy working on the Chore Door and i’m stuck. I’ve just added to more doors task 19 and none of the doors will open. This is my 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"

  doorImage1.onclick = () => { doorImage1.src=botDoorPath
  }
  doorImage2.onclick = () => { doorImage2.src=beachDoorPath
}
  doorImage3.onclick = () => { doorImage3.src=spaceDoorPath
}
2

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

the console shows an error when trying to run your code:

SyntaxError: “” string literal contains an unescaped line break

then clicking on the file and line, it shows me:

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

which means i can understand the problem, but the codecademy IDE displays it fine despite not being fine.

3 Likes
4

Aha as small as that. I gonna change that. Thanks!

5

Again stuck at this phase of the project:

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 numClosedDoors = 3;
let openDoor1; 
let openDoor2;
let openDoor3;

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


doorImage1.onclick = () => {doorImage1.src=openDoor1}
doorImage2.onclick = () => {doorImage2.src=openDoor2}
doorImage3.onclick = () => {doorImage3.src=openDoor3}

randomChoreDoorGenerator();
6

please see this topic:

How to ask good questions (and get good answers)

dumping code is easy, but if i solve it for you, you will struggle again next time

you have checked the console for any obvious errors?

1 Like
7

i’m already trying for 1 hour to change all kind of things and don’t know where to look unfortunally. I think i ran down the code a few times and sorry if it looks like i’m dumping it. But i don’t know where to look.

8 
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 numClosedDoors = 3;
let openDoor1; 
let openDoor2;
let openDoor3;

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


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

randomChoreDoorGenerator();
9

The problem with this assignment is that there is no error console being displayed.

1 Like
10

@janneslohmeijer, you can use your browser console. That will still display the error message, i get a very clear error message:

SyntaxError: unexpected token: script.js:23:25, with line number (23) and character number (25)

quite useful.

@vinniem1, now that we have identified the error on this line:

else (choreDoor === 2) {

you see any problems? Else can’t have any conditions.

2 Likes
11

I know but not everyone does :wink: .

12

well, if they don’t know, they can ask.

13

aha! this is the right code:

else { (choreDoor === 2)

Many thanks! But i just tried to put the whole code in my console from Chrome but didn’t see any errors. Sorry i just started coding 3 weeks ago. Is there anything i am doing wrong?

Thanks anyways for this and have a nice day =)

14

Hey @vinniem1

All you have to do is have the console open whilst you save and run your script in codecademy. Errors should pop up at the start or whilst interacting with the doors.

1 Like
15

I’ve tried that now and i get this message:

Uncaught SyntaxError: Unexpected end of input script.js:85. I was looking into the code this whole morning and again i’m stuck. I do not get any different message’s

this is my code:

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

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 numClosedDoors = 3;
let openDoor1; 
let openDoor2;
let openDoor3;


const isBot = (door) => {
  if(door.src === botDoorPath) {
    return true;
  } else {
    return false;
}
  
const isClicked = (door) => {
  if (door.src === closedDoorPath) {
  return false;
} else {
  return true;
}
}

const playDoor= (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
  gameOver('win');
} else if (isBot(door)) {
  gameOver('lose');
} 
}

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


doorImage1.onclick = () => {
  if(!isClicked(doorImage1)) {
  doorImage1.src=openDoor1;
  playDoor(doorImage1);
}
}
doorImage2.onclick = () => {
  if(!isClicked(doorImage2)) {
  doorImage2.src=openDoor2;
  playDoor(doorImage2);
}
}
doorImage3.onclick = () => {
  if(!isClicked(doorImage3)) {
  doorImage3.src=openDoor3;
	playDoor(doorImage3);
}
}

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

it says that the ‘randomChoreDoorGenerator();’ is wrong but why would it? i am at step 62.

Kind regards,

1 Like
16

Well, what seems odd here?

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 { (choreDoor === 2) 
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
}
17

Good question. The code stopped working after step 58. So i don’t know.

18

Hint, how do you setup an if…else if… else condition?

19

part of programming is figuring out what goes wrong. Its important to teach yourself some crucial thinking steps, like: what did i change? What could have broken? Are there any errors (use your browser console)? Can i gather more information? Verify steps of your program, see where it does work and where it stop working, try to narrow it down

We are here to help you, guide you in the right direction, but at the end of the day you are the one that needs to solve it :wink:

3 Likes
20

I’ve changed it yesterday the “else” to curly bracket at the beginning and the code was working properly. the code doesn’t look odd to me :confused: