Selecting ID's with variables.

Question

So I'm a bit confused as to what is happening when we call the elements from the html.

for instance

const myHeading = document.getElementById('myHeading');

now I assumed we were assigning the const variable myHeading to equal the element in the HTML with the ID of 'myHeading'. Then using this variable with the addEventListener method. Yet it doesn't seem to matter what the name of the const variable is. for instance I can say

const myHeadingIsSomethingElse = document.getElementById('myHeading');

and still use

myHeading.addEventListener();

What is the point of assigning the variables in this case? is it simply loading those elements to the JS? Do we actually call upon those variables anywhere else, or do we always use the id of the element from the html? Could you assign something else to that variable later in the code (considering you use let instead of const), and still have access to the the element?

Answer 1 · 2019-02-12T03:35:39Z

February 12, 2019 3:35am

You are probably using chrome or some variant. Chrome does some stuff automatically for convenience in development. If you go to the console and type myHeading, you will be able to access the dom node instantly. This is not javascript but hidden stuff in the chrome browser itself. Do not rely on it. It's just to help development. It will not work in Firefox or edge.

//          
const whateverYouWantDoesntMatter = document.getElementById('myHeading');
// the dom item is now associated to the whateverYouWantDoesntMatter variable
// by definition, variable means it can be anything within the rules of naming in js.

Welcome to the Treehouse Community

Looking to learn something new?

Keith Walker

Keith Walker

Selecting ID's with variables.

1 Answer

Dario Bahena

Dario Bahena