Chore Door Exercise - Can you use the DOM element IDs instead of creating separate variables?

I’ve recently completed the Chore Door Exercise as part of the Building Interactive JavaScript Website and have a question. I’ve noticed some strange JS behaviour which is confusing me so I need to ask somebody, can you use only the DOM element ID instead of creating separate Global variables, because they appear to be interchangeable?

For example, the ChoreDoor exercise asks us to define the following global variables for DOM element IDs

	let doorImage1 = document.getElementById(‘door1’);
	let doorImage2 = document.getElementById(‘door2’);
	let doorImage3 = document.getElementById(‘door3’);
	let startButton = document.getElementById(‘start’);

In the the walkthrough they seems to use these variables inconsistently. For example, the .onclick statements use a combination of variables and IDs in their construction.

e.g. Using the door1 DOM element id with .onclick

	door1.onclick = () => {
  	if (currentlyPlaying && !isClicked (doorImage1)) {
  	doorImage1.src = openDoor1;

e.g. This time using the startButton global variable with .onclick

	startButton.onclick = () => {
  	if (!currentlyPlaying) {

As an experiment I’ve played around with the code and replaced all of the global variables with the respective DOM element Ids e.g. door1, door2, start etc. and the code seems to runs without any issues that I can see,

e.g. Using only DOM element ids

	door1.onclick = () => {
 	 if (currentlyPlaying && !isClicked(door1)) {
 	   door1.src = openDoor1;

Is this normal behaviour? If so, why bother creating global variables to begin with if the DOM elements IDs are already available and accessible?

I’d be grateful if someone could explain to me what behaviour I am seeing and what is considered best practise.

I would use variable. Using ids directly for click events might mean the DOM has to be traversed every time to find the desired element. Which would make it very expensive operation

using the ids directly also means you rely on “magic” provided by JavaScript, which makes the code less readable.

by using getElementById (isn’t this method outdated? shouldn’t this be querySelector?) we explicitly state what we are going to do (retrieve an element), so then when we use click, we can read back in our code what we are actually clicking on

Thanks for replying. I agree Variables for me is the the right way to go and what I’d learned through Codecademy. So I was therefore really surprised to see a different approach shown in the Codecademy walkthrough for this exercise.

Knowing different approaches (variable and querySelector/getElementById or id) is a good thing, then you consider the pros and cons, and choose the right approach :slight_smile: