Chore Door Project: door not opening?

Projects
,
#1

I’m working on the Chore Door project, and I can’t seem to get the door to open! The image of the door is there, but the function doesn’t seem to be working. I broke down and started watching the walk through, but I’m still not sure what I’m doing wrong.

Here is what I have in each file:
HTML

<!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" 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>

JAVASCRIPT

let doorImage1 = document.getElementByID('door1');
const botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
door1.onclick = () => {
  doorImage1.src=botDoorPath;
}
3 Likes
#3

Out of curiosity, what browser are you working in?

3 Likes
#4

Currently Chrome. Do you think I should try a different one?

2 Likes
#5

First, try using this…

doorImage1.onclick =
4 Likes
#6

Also check for typo’s:

//incorrect
document.getElementByID('door1');

// correct
document.getElementById('door1');
3 Likes
#7

Oh man, that was it! :sweat_smile: thanks biirra, I can’t believe I missed that.

It looks like that’s how I had it written in my notes because that’s how it appears when the function is first mentioned:

1 Like
#8

That would explain why this keeps cropping up.

1 Like
#9

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.