Hello and welcome back, this lesson showing you how to use dorm content loaded, this is going to be
the same type of function.
If you're familiar with Jaquie, where we make sure that the document object has loaded before, we
try to manipulate any of the elements on the page and the way the JavaScript works.
So usually if you are interacting with the dorm, you'll put the script content after the elements,
the HTML content, so that you make sure that each HTML has already loaded before.
He tried to select those elements.
And the one way to ensure that your dorm content has loaded is to add an event.
Lyster for dorm content.
Load it.
So let's go ahead and add in our event listener listening on the document object to make sure that the
content has loaded.
So using the document we can add an event listener because the document is an object.
And the same way that we use query selector, we can add an event listener to it, the event that we're
listening for.
So here's we have to specify what we're listening for, the different events that are available on the
page.
So if you have a click or if you have a change and there's also the DOM content loaded, so we wait
to make sure the DOM content has loaded and then we can run a function.
So in this case, we're just going to have the function directly within that event.
Listener.
So now whenever the page loads, it's going to invoke this anonymous function.
And you can see when we go console log and I'll just type in ready into the console and we go back out
into our application, refresh it.
We see the word ready.
So that means that the DOM content has loaded and we're ready to interact with it.
And we can also update some of the elements now that we've got them within an object format.
So making sure that they are ready and now they're actually not going to be under the global scope means
that we need to create another variable in order to contain all of these so that we can utilize it within
the global scope.
So creating another element here and we'll just call it game and create this as an object.
So this is just a variable that's going to contain values.
And then within here, now we can use the game object and set all of these values.
So we're going to have all of these elements still available in game.
And you're going to see that when we refresh it.
And we rebuilt this.
So now if I output game, you can see that it's an object and it's an object that contains all of those
elements.
So we're still linking to those elements the same way and we can access them contained within the global
variable called game.
But now we're just setting them once the document content has loaded and we're ready to go in to make
our interaction.
So we're also ready to build the rest of the content and to start the gameplay.
So initiating the gameplay.
So next, we're going to create a function that's going to initiate the gameplay.
So set that up now and then the next lesson will go through that function.
So init function, create that function.
So this is the function that's going to run when the game, when the document has loaded and we can
ready to initiate our gameplay so we can update some of the message information at this point and have
the user begin the game.
And we can also update the button contents to be start instead of guess and maybe even hide that input
value.
So that's all coming up in the next lesson.