Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When a browser "reads" through an HTML page, any JavaScript it encounters is run as soon as the browser sees it. If JavaScript is written at the top of the document, it can fail if the browser hasn't seen the elements it refers to yet. We can use the DOMContentLoaded event to solve this issue.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
So far other JavaScript we've been writing
is being loaded at the bottom of the file.
0:04
So let's move the script tag to
the top into the head section and
0:09
see if it has any effect
on our application.
0:13
I'll switch over to the browser, and
refresh and the check box disappeared.
0:17
So now I'll submit a name.
0:22
We see that the browser refreshes,
and if I open the console.
0:25
I see that the browser can't find
a query selector of null on line 2.
0:29
So let's go back, and
look at line 2 of our code.
0:35
And here we see that
query selector is being
0:39
called on form which
our error says is null.
0:44
Well, on line 1 form
was declared by calling
0:48
getElementById on the document object.
0:52
But this was apparently unsuccessful
because the constant form holds
0:56
a null value.
1:00
Now switching over to index.html,
1:01
we see that there's definitely
a form with the ID registrar.
1:03
So the reason it's failing
to select the form
1:08
is because we've moved this
script tag to the top.
1:11
You see,
when the browser loads index.html,
1:15
it reads it from top to bottom
assembling it as it goes.
1:18
The browser runs the JavaScript file
before it even looks at the body element
1:22
much less anything inside
the visible portion of the DOM.
1:26
So none of the elements even exist
at the time app.js looks for them.
1:30
Now when app.js was at the bottom of
the document, this was not an issue
1:34
because all the HTML had loaded before
the browser ran into the JavaScript code.
1:38
So you may not always have control over
when your JavaScript code is loaded.
1:44
For example you might be
working on a team and
1:49
are asked to write a JavaScript library
to handle some form validation.
1:51
That code is given to another developer
who adds it to the top of the page instead
1:55
of the bottom of the HTML.
1:59
Well, fortunately, you can program
defensively, preparing your scripts for
2:00
this type of problem, pretty easily.
2:04
We can make a minor
modification to our code, so
2:07
it makes no difference where
the HTML loads app.js.
2:10
The DOMContentLoaded browser event
2:14
triggers when all of the DOM has been
parsed and loaded into the browser.
2:17
That event signals that it's safe to
select elements, manipulate them or
2:21
set listeners on them.
2:25
So we can wrap all the code we've
written so far inside a listener for
2:26
this DOMContentLoaded event.
2:31
And the browser will load our code,
after the DOM is fully loaded.
2:33
Switching over to app.js,
2:39
I'm going to insert a listener
at the very top of the page.
2:41
Now the document object always
exists even if it doesn't contain
2:45
all the parsed HTML yet.
2:51
So we can call document, and
then add an event listener to it.
2:52
The event is DOM content loaded, so
I'll enter that string as a first
2:58
argument, Then for the second argument,
3:03
I want to wrap all the code in
the file into a callback function.
3:10
So I'll leave the curly brace open here,
and
3:16
scroll all the way to the bottom
of the file to close it.
3:20
Then I'll close the parentheses.
3:23
Now let's indent all the code
inside this new listener.
3:27
We'll save our file and
switch back to the browser.
3:35
Now when we reload the page,
we see that the check-box is back and
3:39
entering a name and
clicking on the buttons works.
3:45
So what's happening now is
the browser is loading the code but
4:02
it's waiting until the page is loaded
before running our code against it.
4:06
Now our script can be placed anywhere
on the page and it will always work.
4:11
But I'm going to move the script tag back
down just before the closing body tag.
4:16
Generally it's better if JavaScript
is loaded after HTML and CSS.
4:21
Because on slow connections users will
still be able to see the app sooner.
4:26
Which is a better experience than
staring at a blank page while
4:30
the JavaScript loads.
4:32
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up