Chore Door

Ah that’s simple enough! Thanks for the reply!!

1 Like

I’ve tried every iteration of solving from above discussion and still haven’t been able to get it to work! I even reset the whole project and started again, trying the video solve line by line, and still can’t get that dang door to open.

Here’s my code:

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" scr="script.js"></script>
  </body>
</html>

JS

let doorImage1 = document.getElementById('door1')

let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"

doorImage1.onclick = () => {
doorImage1.src = botDoorPath
};

Why isn’t this working???

Thanks!

You have a typo - in your HTML file your JS source should be linked using src=, not scr=.

Thank you for having the same problem(ish) I did. I could not nail down the error. Then I read some of the comments here and just kept Inspecting the page in a browser until the Console was clear! Thanks again, time to finish this.

1 Like

I came here with the same issue - correct code, but the door wouldn’t open.
What worked for me was moving the script tag to the bottom of the html document, right before (</body>). That’s because the files are executed top to bottom and the script was running to declare the variable for the door image before it was rendered, assigning the variable a null value. My console error was ‘cannot set property onclick of null’, and that’s what led me to reorder the script tag.