Something wrong with image file in my JS code?


#1

My code seems to work but instead of changing the image to the one that I put. It makes it this little white square that, if opened in another tab, gives me error 404.

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
let numClosedDoors = 3;
let openDoor1 = 0;
let openDoor2 = 0;
let openDoor3 = 0;

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

let doorImage1 = document.getElementById('door1')
door1.onclick = () => {
	doorImage1.src = openDoor1;  
}

let doorImage2 = document.getElementById('door2')
door2.onclick = () => {
	doorImage2.src = openDoor2; 
}
let doorImage3 = document.getElementById('door3')
door3.onclick = () => {
	doorImage3.src = openDoor3; 
}

randomChoreDoorGenerator();

#2

That is the only place to use let. It is for declaring variables. Now whenever you wish to assign a new value, just write,

openDoor1 = ...;

There is no such event, onclick that I am aware of. It is an HTML attribute.

door1.on('click', () => {
    doorImage1.src = openDoor1;
});

Aside

A good way to organize our code is to cache everything at the top of the script.

Create listeners at the end of the script, and write everything else in between.

A discussion for another day is delegation which is a powerful tool when working with multiple handlers. We can get by with only one listener. More later.

Lastly, can we please have a link to this project so we may work on it and see what comes up? Thanks.