Choor Door Project (Step 10 - Door is not opening!)

Hello!
I hope you are doing well :slight_smile:
currently I am working on the following project ==>
https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

On step 10 it says the following:
Next, within your doorImage1.onclick arrow function, change the src of doorImage1 to the value of botDoorPath .

Refresh the page. Now when you click on the door, watch as the closed door image changes to the ChoreBot ready to greet you with housework!

Here is my current 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">
	    <script type="text/javascript" src="script.js"></script>
  </head>
  
  <body>
  <div class = 'door-row'>
    <img  id ='door1' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg
'>
  
  
  </div>

  </body>
</html

CSS:

body {
  background-color: #010165;
  margin: 0px;
}

#door1 {
  cursor: pointer;
}

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;
  
}

Hi, welcome to the forums.

The code gives an error because the onclick event can’t be added to the doorImage1 object before it is created.

You can load the script after the body.

    </body>
    <script type="text/javascript" src="script.js"></script>
</html>

I’m sure others would be able to give you different solutions though.

Remember to check the console while you’re creating web projects, it usually gives useful info when something is not working, if it is an error… (Press F12 in most browsers to open it)

3 Likes