Chore Door - Calling an element by ID without declaring it in Javascript

Hi. In this project we are asked to declare variables and setting them equal to some img elements gotten by ID. i.e.:

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

But also, sometimes in the instructions we are asked to use the id name in the code instead of the declared variable for that element. For example:

Inside the script.js file, underneath your global variable, assign door1.onclick to a new, empty arrow function.

This function will run whenever the door image element is clicked.

or

Since the playDoor() function now needs an argument, look at the door element .onclick() functions. Pass door1 , door2 , and door3 , respectively, as the arguments for the playDoor() function within each .onclick() function.

If on console I write door1 and hit enter, it does return the HTML element. I tried replicating the whole scenario outside de codecademy learning environment and it also works. It also works independently of declaring a variable for that element or not.

My questions are:
Why does this work? Why can you call HTML elements by id without declaring them?
If this works, why are we asked in some instructions to use the variable for that element and in some others to simply use the ID?
Is it advisable to call the element just by ID? In which cases?

Thanks for any input on this. It’s really wrecking my mind.

3 Likes

Hey @blameitonjoe, well spotted!

This is an issue @mtf and I noticed earlier this month which needs some serious attention from the Codecademy staff for it should not be possible. Our guess is that is has something to do with the backend of the exercise.

Always declare properly, don’t let this issue fool you to believe you can call ID’s directly.

5 Likes

Maybe there’s an issue with the instructions since up to that point I had always been told to only work with declared variables.
On the other hand it kind of works. I tried some other things locally (i.e. outside the codecademy environment and in plain old local files) and it works to some extent. It can’t be used in all cases because it doesn’t return all properties of the element but in some it does.
I’m really intrigued.

3 Likes
  • Why does this work? Why can you call HTML elements by id without declaring them?
    I am not sure what you mean with this since you can’t call an element directly on id without finding it trough the document.
  • as in why does that work ?
    let doorImage1 = document.getElementById('door1'); This line gets the element from the document and puts it in doorImage1. If you would console.log(document) you would see your whole html object. .getElementById('door1'); is a function that will search your document for that specific element and returns it to you.
    document Is a object that is always set globally and can be accessed at all times. This object will always contain your html output.
  • Is it advisable to call the element just by ID?
    If you already stored the element in a variable you should use the variable instead cause document.getElementById does need resources and will slow down your program if excessively used. (alt ho it would not really be noticeable until you really abuse it.)
  • In which cases?
    There are some reasons to call the element again with document.getElementById('door1'); instead of using a variable that contains the element. for example if the variable is scoped (which would mean you cant access it from the spot you are trying to use it).
3 Likes

@biirra the problem lies in the fact that in the Chore Door exercise you can call the html id directly without declaring it first using getElementById. The explanatory video even does this, as does the hint.

And that doesn’t make sense! Hence @blameitonjoe post :wink: .

3 Likes

Yea i figured that would be the case. Just thought it would be nice to have the information of how it should work.

4 Likes

It’s provided in the link. I was just stating that it doesn’t return undefined and I could continue the exercise as intended.
Thanks for your answers. I know about assigning an element called by ID to a variable but the exercise explicitly ask you to write the ID as variable at some points. That is why I’m confused.

1 Like

I’m just working on this project now, using doorImage1.onclick doesn’t work at all, the code only works when using door1.onclick. It’s not clear how this works as the door1 variable is never declared. I’ve only reached step 10 so far so I’m unsure how this affects the rest of the project.

1 Like