Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
215,958 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

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

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