1
00:00:00,060 --> 00:00:06,060
Hello and welcome back, this lesson showing you how to use dorm content loaded, this is going to be

2
00:00:06,060 --> 00:00:07,080
the same type of function.

3
00:00:07,080 --> 00:00:12,300
If you're familiar with Jaquie, where we make sure that the document object has loaded before, we

4
00:00:12,300 --> 00:00:16,980
try to manipulate any of the elements on the page and the way the JavaScript works.

5
00:00:16,980 --> 00:00:23,550
So usually if you are interacting with the dorm, you'll put the script content after the elements,

6
00:00:23,850 --> 00:00:28,860
the HTML content, so that you make sure that each HTML has already loaded before.

7
00:00:28,860 --> 00:00:30,660
He tried to select those elements.

8
00:00:30,840 --> 00:00:35,310
And the one way to ensure that your dorm content has loaded is to add an event.

9
00:00:35,310 --> 00:00:37,140
Lyster for dorm content.

10
00:00:37,140 --> 00:00:37,580
Load it.

11
00:00:37,590 --> 00:00:43,260
So let's go ahead and add in our event listener listening on the document object to make sure that the

12
00:00:43,260 --> 00:00:44,640
content has loaded.

13
00:00:44,820 --> 00:00:49,530
So using the document we can add an event listener because the document is an object.

14
00:00:49,620 --> 00:00:54,360
And the same way that we use query selector, we can add an event listener to it, the event that we're

15
00:00:54,360 --> 00:00:54,980
listening for.

16
00:00:54,990 --> 00:00:59,910
So here's we have to specify what we're listening for, the different events that are available on the

17
00:00:59,910 --> 00:01:00,330
page.

18
00:01:00,480 --> 00:01:06,120
So if you have a click or if you have a change and there's also the DOM content loaded, so we wait

19
00:01:06,120 --> 00:01:10,060
to make sure the DOM content has loaded and then we can run a function.

20
00:01:10,500 --> 00:01:15,000
So in this case, we're just going to have the function directly within that event.

21
00:01:15,000 --> 00:01:15,390
Listener.

22
00:01:15,750 --> 00:01:20,340
So now whenever the page loads, it's going to invoke this anonymous function.

23
00:01:20,580 --> 00:01:27,950
And you can see when we go console log and I'll just type in ready into the console and we go back out

24
00:01:27,960 --> 00:01:30,510
into our application, refresh it.

25
00:01:30,510 --> 00:01:31,680
We see the word ready.

26
00:01:31,890 --> 00:01:35,970
So that means that the DOM content has loaded and we're ready to interact with it.

27
00:01:36,090 --> 00:01:40,870
And we can also update some of the elements now that we've got them within an object format.

28
00:01:40,890 --> 00:01:46,530
So making sure that they are ready and now they're actually not going to be under the global scope means

29
00:01:46,530 --> 00:01:52,140
that we need to create another variable in order to contain all of these so that we can utilize it within

30
00:01:52,140 --> 00:01:53,090
the global scope.

31
00:01:53,100 --> 00:01:58,210
So creating another element here and we'll just call it game and create this as an object.

32
00:01:58,240 --> 00:02:01,080
So this is just a variable that's going to contain values.

33
00:02:01,080 --> 00:02:06,270
And then within here, now we can use the game object and set all of these values.

34
00:02:06,280 --> 00:02:10,350
So we're going to have all of these elements still available in game.

35
00:02:10,500 --> 00:02:13,020
And you're going to see that when we refresh it.

36
00:02:13,170 --> 00:02:14,850
And we rebuilt this.

37
00:02:14,880 --> 00:02:20,610
So now if I output game, you can see that it's an object and it's an object that contains all of those

38
00:02:20,610 --> 00:02:21,050
elements.

39
00:02:21,060 --> 00:02:26,850
So we're still linking to those elements the same way and we can access them contained within the global

40
00:02:26,850 --> 00:02:28,830
variable called game.

41
00:02:28,830 --> 00:02:34,320
But now we're just setting them once the document content has loaded and we're ready to go in to make

42
00:02:34,320 --> 00:02:35,210
our interaction.

43
00:02:35,250 --> 00:02:39,480
So we're also ready to build the rest of the content and to start the gameplay.

44
00:02:39,690 --> 00:02:41,310
So initiating the gameplay.

45
00:02:41,580 --> 00:02:45,600
So next, we're going to create a function that's going to initiate the gameplay.

46
00:02:45,630 --> 00:02:49,580
So set that up now and then the next lesson will go through that function.

47
00:02:49,830 --> 00:02:52,380
So init function, create that function.

48
00:02:52,440 --> 00:02:57,290
So this is the function that's going to run when the game, when the document has loaded and we can

49
00:02:57,300 --> 00:03:02,910
ready to initiate our gameplay so we can update some of the message information at this point and have

50
00:03:02,910 --> 00:03:04,410
the user begin the game.

51
00:03:04,410 --> 00:03:10,320
And we can also update the button contents to be start instead of guess and maybe even hide that input

52
00:03:10,320 --> 00:03:10,680
value.

53
00:03:10,710 --> 00:03:12,570
So that's all coming up in the next lesson.