What am I doing wrong?

So I am stuck trying to get my code to work. It won’t work in the project editor, but it will mostly in here. Basically my 3rd door will not open. What is wrong with it?

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

  <body>
    <div class="door-row">
      <img class="door-frame" id="door1" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door2" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img class="door-frame" id="door3" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
  </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 beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
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";

door1.onclick = () => {
  doorImage1.src=botDoorPath
}
door2.onclick = () => {
  doorImage2.src=beachDoorPath
}
door3.onclick = () => {
  doorImage3.scr=spaceDoorPath
}

Hey @ajames0531

I noticed this:

You misspelled “src”

3 Likes

Oh wow. Thanks for that. I guess I just needed a fresh set of eyes.

1 Like