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 Basics Making Decisions in Your Code with Conditional Statements The Conditional Challenge Solution

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

storing access to main in a variable

How Guil stored the access into a variable is that possible?

const main = document.querySelector('main');

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It's possible and quite common. After your statement, the variable "main" will be a reference to the <main> element of the document.

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Hi Steven, thanks again for the reply, as it holds the reference but it does not hold the actual content and as we know variable's value can be changed, so how the code will be interpreted in the browser, but i thought it will be stored in the variable

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

If you wanted to get the content instead of the reference, you could assign this instead:

const main = document.querySelector('main').innerHTML;

Just be aware if you do that, the variable will just hold the content as a string and can't be used as a reference to the element. So this wouldn't serve the same purpose as what the variable main is being used for in the video.

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

Okay so you mean to say with .innerHTML the variable will hold the values in it instead of the reference, as .innerHTML is used to take over the content part right, so by just giving the reference of the Structure which is here-

( const main = document.querySelector('main') )

by giving

const main = document.querySelector('main').innerHTML;

we are giving it the inner values instead? but doesn't that is the same as we just want to access the data inside even if we give the inner values if we change the value of the variable the data will be replaced?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

If you want to use the variable to access anything later, you must assign it as in your original code example. If you want the element's HTML content, you can use the example I gave.

If you change the variable later, it doesn't matter whether it is being used for content or reference, whatever it was holding gets replaced by the new assignment.