Onclick function from Chore Door project

I have tried to get the following function to work, from the Chore Door Project and just cannot see where i’m going wrong, can anyone help please?

let doorimage1 = document.getElementById(‘door1’);
let doorimage2 = document.getElementById(‘door2’);
let doorimage3 = document.getElementById(‘door3’);
let botDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg
let beachDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg
let spaceDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg
door1.onclick = () => {
doorImage1.src = openDoor1
}
door2.onclick = () => {
doorImage2.src = openDoor2
}
door3.onclick = () => {
doorImage3.src = openDoor3
}

Where exactly are you defining door1, door2 and door3?

In addition to @thepitycoder’s question, where do you define doorImage1, doorImage2 and doorImage3? I see similarly named variables defined, but not these. :wink:

1 Like

In the index.html file

Thanks for all the replies.

The door1,2,3 are all defined in the index.html file.

That’s great, but JavaScript doesn’t magically know about anything in that HTML file. You need to tell it, like you have done here:

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

So, when you’re later setting .onclick properties - where is that door1 coming from? Just because it’s in your HTML, doesn’t mean JavaScript will know about it…

Awesome, thanks for the info.:+1:

Might be a good idea to pass that on to the coder who recorded the project walkthrough too. :grinning: