Chorebot javascript


#1

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

on step 45 of the chore Door project, I call the function randomChoreDoorGenerator() , but when i click on the doors they won’t open…
Could you help me please? here is my JS 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";

const numClosedDoors= 3;
let openDoor1=;
let openDoor2=;
let openDoor3=;

const randomChoreDoorGenerator=()=> {
  
  const choreDoor= Math.floor(Math.random()*numClosedDoors);
  if ( choreDoor === 0){
    openDoor1 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
    openDoor2 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
    openDoor3 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
  }else if (choreDoor ===1){
    openDoor2 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
    openDoor1 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
    openDoor3 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
  }else (choreDoor===2){
    openDoor3 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
    openDoor2 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
    openDoor1 = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
    
  }
  
};

doorImage1.onclick = () => {
  doorImage1.src= openDoor1;
};

doorImage2.onclick = ()=>{
  doorImage2.src= openDoor2;
};

doorImage3.onclick = () =>{
  doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

#2

Even if I edit the code in the function like this, it doesn’t work:

const randomChoreDoorGenerator=()=> {

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


#3

right click on the webpage, select: inspect element, then open the console tab. This will show you errors in your JS code:

SyntaxError: expected expression, got ‘;’ script.js:14:14

so you have a syntax error on line 14, 14th character.


#4

So I went to inspect my code and this is the error:

“unexpected token ;” on line 14

This is line 14: “let openDoor1=;”

so I tried to modify it to

let openDoor1;

But my doors still won’t open when I click on it. openDoor1 is supposed to be defined later by the conditions in the function. What did I do wrong?


#5

Got my mistake! it was on my else statement: I put a condition to else.

thanks


#6

Even better you resolved the other problem solve. But i also hope you learned a bit a debugging or a debug tool (console) in general.


#7

To clarify, JS lets us declare a variable in two ways.

  1. Declare and define: const numClosedDoors = 3;
  2. Declare only: let openDoor1, openDoor2, openDoor3;

The latter can be defined later but at least by declaring they are hoisted and ready for an assignment anywhere in the code.

It would seem the instructors would have us throw out the old (var) in favor of the new (let). This is misleading in that in either global or function scope, var is still locally scoped. There is no reason to use let in either instance since var is more than adequate. let is for giving block scope to variables that may ‘leak out’ from for or while loops (or switch).

var numClosedDoors = 3;
var openDoor1, openDoor2, openDoor3;

These are global variables with nowhere to leak. Technically they don’t even need var in the declaration. It just makes for better reading.