Chore Door Project

Projects
1

I need help. I am currently working on the Chore Door Project and I cant get my doors to open. I have tried to modify the code multiple times and don’t know what I am doing wrong. If anyone can give any advice on how to that would help immensely.

HTML

 <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">
      <script type="text/javascript" src="js/robodoor.js"></script>
 </div>

JavaScript

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

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";
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

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

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


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

Not sure if there are any other problems at this point, but the numClosedDoors & openDoor variables referred to above need to be declared with let instead of const. The preceding variables are fine with const since their assignments will never change.

1 Like
3

Yeah that sort of fixed it. The images are now changing when I click, but the source is now undefined rather than the image that I want. I think it is the randomChoreDoor function that is not working correctly now.

modified js

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

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";
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";

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

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


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

It correctly changes the image on the door if I replace openDoor1 with botDoorPath within the onclick function

4

Also what is the difference between using const, let, and var?

5

var is on the way out but has some value in scoping. let does what var does, except it dials into the block it is declared in.

const means we do not want/expect the value to change. If it is a data structure, then we cannot change the type, but we can change the items in the structure.

6

I believe your code works as expected for now. Having just reviewed the instructions for this project, it appears you just finished step 44. When you add the function call to randomChoreDoorGenerator() as instructed in step 45, you should see the images when you click on the doors.

7

Hi

Just finished mine

Chore Door Game

Cheers