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

Projects
1

Hello there,

So currently I am working on the following project: https://www.codecademy.com/paths/web-development/tracks/building-interactive-javascript-websites/modules/web-dev-interactive-websites/projects/chore-door

On step 10 it says the following:

  1. Next, within your door1 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!

Hint:

A variable’s src value can be assigned a new value held by another variable:

variableA.src = path;

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

CSS:

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

#door1 {
  cursor: pointer;
}

JavaScript:

let doorImage1 = document.getElementById("door1");
door1.onlick = () => {
  doorImage1.src = botDoorPath;
}

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

I just want to know why the door is not opening.

The next step involves adding more doors, but if it’s not opening now I’d like to figure out what went wrong.

Any help?

2

if i insert an alert within the onclick method:

door1.onlick = () => {
  alert("i get here");
  doorImage1.src = botDoorPath;
}

we get nothing, so the click event is not register. So something goes wrong in this line:

door1.onlick = () => {
1 Like
3

Lol I realized it was such a silly mistake.

onlick > onclick

I’m facepalming at myself.

Thanks for the help!

1 Like
4

And the reason i didn’t just tell you you had a typo, was because i hope you also see how i debugged and hopefully learned something from it

5

I’m stuck at the same point, and my code is identical without the typo? What else am I missing?

let doorImage1 = document.getElementById ("door1");

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

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

Seems to be working fine, but the only way i can know for sure is to check all the code (html, css & js). Hanz posted everything, makes it so much easier to debug

7

This is the rest of my code:

<!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>
    	<img id="door1" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
  </body>
</html>

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

#door1 {
  cursor: pointer;
}
8

i put your code here:

https://jsbin.com/tusuxeviwa/edit?js,output

and it seems to be fine

9

Huh, I’ve tried it in your link and as you say it’s fine there, but in the lesson it just doesn’t work

10

maybe a glitch in the lesson, no idea, as long as you understand the code, its fine

11

your script tag needs to be at the bottom just before your closing body tag

12

good point, otherwise the DOM isn’t ready when JS loads

13

Am I the only one who is getting a white screen on several JS projects, this one included?

14

Thanks, that solved it

15

I had the exact same mistake - but had just written “click” instead of “onclick” and was freaking out

16

I just learn that https://jsbin.com/ is a very good thing …