Chore Door image won't load

Hello everyone!

I have an issue on the first door. It doesn’t load the image when clicking, however the other two do load them.

<!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>
body {
  background-color: #010165;
  margin: 0px;
}

.door-frame{
  cursor: pointer;
  padding: 10px;
}
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';

door1.onclick = () => { 
  doorImage1.src=botDoorpath;
};

door2.onclick = () => {
  doorImage2.src=beachDoorPath;
}
door3.onclick = () => {
  doorImage3.src=spaceDoorPath;
}

The error lies in there.

2 Likes

thanks!! that P… :sweat_smile:

2 Likes