Chore Door

Hi, I’m having trouble with the chore door project. I feel like this should be simple, but I’ve been struggling with this for a while and just can’t get my door to open. Can someone tell me what I’ve got wrong?

let doorImage1 = document.getElementById(‘door1’);

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

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

Link to project is here: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

1 Like

Welcome on the forums @lgyre !
Don’t forget to put your code inside preformatted text, this can be done by clicking on image
on a new line, and putting your code inside it.

Your code is completely alright, I’ve checked it just to be sure, but it works.
Is this all of your js code?
If it is, then check html, maybe you forgot to put the id tag onto the “door”.
Unfortunately I can’t see the lesson since I’m not pro, so could you post html as well, thanks.


<!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 src="script.jr"></script>
  </body>
</html>

Yes, that’s all the JS so far. Here’s my HTML. Thanks!

1 Like

Try setting the img's width and height tags:

<img id="door1" width="50" height="100" src="path"/>

That changed the door size, but didn’t seem to solve my problem. I’ve watched the video solution, paused the video and checked both my HTML and JS files line by line, as far as I can tell they’re the same*, but I must be missing something.

*I did see one difference, the coder in the video didn’t put semicolons at the end of all the same lines - but I tried removing these, and it still didn’t work.

I’ve had the same problem i tried coding it in VScode but onclick function seems to be not working as i can’t get the door to open either. Please let me know if you found a solution to the problem

Do you have a script.jr file? :wink:

1 Like

Argh! But thank you.

Was your issue solved when you changed it to script.js? I’m having the same issue and I checked my code but it seems exactly the same as person who solved it on video.

My code’s right too, but for some reason my doors aren’t opening after adding the RandomDoorGenerator function. It worked before and was opening when I tried the basic onclick function. Sometimes I’ve found codecademy browser doesn’t work that well with onclick but I might be wrong.

4 Likes

@microplayer64661 & @javajumper03233,

There’s not really anything anyone on the forums can do to assist you without seeing your code. One thing you might give a try is opening your own browser console prior to running your code. If there are errors in your JavaScript, you should see them in the console.

Yeah you have a really good point! I used the console and was able to debug my own code. Thank you

1 Like

Please what did you find out the problem is after using console?

Hi I have the same problem as you, the doors arent open after I add the random chore function.
`Preformatted text
let openDoor1;
let openDoor2;
let openDoor3;
let numClosedDoors = 3;

const randomChoreDoorGenerator =() => {
let choreDoor = Math.floor(Math.random()* numClosedDoors);
if(choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if(choreDoor === 1) {
openDoor2 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else(choreDoor === 2) {
openDoor3 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor1 = spaceDoorPath;
}
}

doorImage1.onclick = () => {
doorImage1.src = openDoor1;
};
doorImage2.onclick = () => {
doorImage2.src = openDoor2;
};
doorImage3.onclick = () => {
doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

`
Can somebody help with this?

Have you tried running your code with your browser’s console open? I did, and the error was pointed right out.

1 Like

Hi, i’m also struggling with this one and the solution that opens the door for me is different than the video and different from the hint.

This code works for me:
const doorImage1 = document.getElementById(door1);

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

door1.onclick = () => {

door1.src = botDoorPath;
}

This one dosen’t work for me, which is the one in the video:
const doorImage1 = document.getElementById(door1);

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

door1.onclick = () => {

doorImage1.src = botDoorPath;
}

and from the above discussion it seems lik this one also should work, but dosen’t for me:
const doorImage1 = document.getElementById(door1);

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

doorImage1.onclick = () => {

doorImage1.src = botDoorPath;
}

So is this just a bugg and which of the above should be the correct one, or is all of them correct and what’s the main difference between them?

Thanks!

I solved it! using const when it should be Let and I didn’t put the ID (door1) in quotation marks. But I didn’t think that was needed when using the getElementById method.

I am stuck on steps 7 - 10. I have read through the above discussion, looked at the video and checked with the browser dev tool, but I have not been able to solve the problem. The robot door will not open with the onclick. The code looks correct to me and nothing is being flagged by the browser dev tool. Any guidance is much appreciated!

UPDATE: The was working on my maching fine, but I couldn’t get the door to open on Codecademy. I rest the entire project, started over, cut and pasted the code back from my local editor to Codecademy and it worked.

Here is my JS code:

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

Here is the 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>

How do I replace the webpage with the console? Is that something I can do, so I can test for errors?

Hello, @cloud8805583614, and welcome to the forums.

Sorry for the late reply. You can open your own browser’s console to see errors in addition to seeing the webpage. If your not sure how to open your browser’s console, do a quick Google search. How do I open the console in Chrome?

1 Like