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
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 PointsHow exactly does the code work?
Here's is a link to the code:
It’s a script that will write the user’s input from the entry box into the <div> tag that has an id of “content” when the button is clicked. The HTML code is in index.html and the JavaScript code is in app.js
The code works, though if I put the script tag right above the “content” div tag then the script will stop working, the console will say “TypeError: null is not an object (evaluating 'content.innerHTML = entry.value’)” once the user clicks the button. The interesting part is that if I remove the content variable and type document.getElementById(“content").innerHTML = entry.value; inside the function then it will make the program work again. So can someone please explain what’s happening. Also, they said that document is an object that represents the web page’s content - is it all the content or just the content before the <script> tag??
2 Answers
Emre Karakuz
9,162 PointsWhen you put the script tag right above the 'content' div, with this part of a code in app.js
const content = document.getElementById("content");
looking for a element with an ID 'content'. Because of the script is ran by browser before applying the 'content' div to the page, script can not find the 'content' div. It has not applied to the page yet.
if you remove const content = document.getElementById("content");, script doesnt try to find 'content' div and no errors will be occurred.
andren
28,558 PointsThe reason that happens is that when the browser gets to a script it pauses rendering of the page and runs through the script first. If the script is at the start of the body that means that when it runs the browser has not yet actually parsed any of the elements found beneath the script, that is not done until after it has finished running the script.
That means that when you tell JavaScript to find an element with the id content it won't find it because the browser has not actually parsed the part of the HTML that generates that element yet.
If the script is placed at the end of the body then you won't run into this issue, as the browser will already be done parsing all of the elements on the page.
The reason why replacing the variable with a direct call fixes your issue is that your direct call happens within a function that you pass to the addEventListener method. The way addEventListener works is that it takes the function you pass it and attaches it to an event on an element (which the browser keeps track of). Then when that event occurs the browser itself will launch your function.
This means that the code you write in the function you pass to addEventListener is not actually executed when JavaScript runs the addEventListener method, it is not run until you actually click the button. And at that point all of the elements on the page has already been parsed so your function will be able to find the element without issue.