Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Select a Page Element By Its ID

Rob Hyrkiel
Rob Hyrkiel
8,659 Points
Posted by Rob Hyrkiel
Rob Hyrkiel
8,659 Points

Code works without const MyButton/myTextInput?

I tried the code like so and it works:

//const myButton = document.getElementById('myButton'); //const myTextInput = document.getElementById('myTextInput')

myButton.addEventListener('click', () => { myHeading.style.color = myTextInput.value; });

(The top 2 lines are commented out). How come it works without the top 2 lines? What is the reasoning behind including it in the video? Thanks!

3 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

No, that really should not work .. but it does!

I thought for sure it would cause "undefined reference" errors. But to my great surprise, I tried it myself and it worked. After a bit of research I discovered that this is called "named access on the window object" and is part of the HTML5 definition. The browser creates variables for each element with an id property and assigns the element to the variable, and in some cases will do something similar using name attributes. It just happened to work here because the variable names were exactly the same as the element id property names.

I was not aware of this behavior before, but I can guarantee you that it is not good practice to rely on it! Every reference I found describing this behavior included warnings not to use it.

Rob Hyrkiel
Rob Hyrkiel
8,659 Points
Rob Hyrkiel
Rob Hyrkiel
8,659 Points

Ooops, haven't posted a question before so wasn't sure how to do that. Ignore the code above, here is an updated version:

JS

//const myHeading = document.getElementById('myHeading');
//const myButton = document.getElementById('myButton');
//const myTextInput = document.getElementById('myTextInput');

myButton.addEventListener('click', () => {
  myHeading.style.color = myTextInput.value;
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>
    <input type="text" id="myTextInput">
    <button id="myButton">Change headline color</button>
    <script src="app.js"></script>
  </body>
</html>

I'm able to change the color even though those top 3 lines are commented out. I am assuming that the lesson/video is just trying to relay some sort of best practices?

Rob Hyrkiel
Rob Hyrkiel
8,659 Points
Rob Hyrkiel
Rob Hyrkiel
8,659 Points

Wowwww! I just typed out 'myButton" in the console to check for myself and it output the element like you said. I wonder why that is being implemented? Seems like a bad idea!

Thanks for looking into this