1 00:00:00,990 --> 00:00:01,570 Welcome back. 2 00:00:01,590 --> 00:00:06,210 This is going to be a quick lesson to modernize what we did in the previous lesson where we've got our 3 00:00:06,220 --> 00:00:10,530 HTML elements and we're have the unclick attributes. 4 00:00:10,740 --> 00:00:13,920 So we're going to get rid of all of these and do this with JavaScript. 5 00:00:13,950 --> 00:00:19,920 So we're going to have only HTML within the index HTML, but we're going to keep the three button elements 6 00:00:20,070 --> 00:00:21,780 and I'll show you how you can select these. 7 00:00:22,020 --> 00:00:23,970 And there's going to be more on this coming up. 8 00:00:24,360 --> 00:00:27,090 And this is all to do with the DOM. 9 00:00:27,210 --> 00:00:31,560 So the DOM gives us an option to interact with the elements on the page. 10 00:00:31,800 --> 00:00:33,000 And we saw that earlier. 11 00:00:33,000 --> 00:00:40,440 When we console or console directory the document object, we see we've got all of the stuff that's 12 00:00:40,440 --> 00:00:42,330 contained within the document object. 13 00:00:42,540 --> 00:00:44,850 We've got all of the HTML information. 14 00:00:44,970 --> 00:00:51,840 If we go into the children, you can see within the HTML tags, we've got more children, we've got 15 00:00:51,840 --> 00:00:53,370 the head, we've got the body. 16 00:00:53,490 --> 00:00:58,770 And then within the body we've got even more children and we've got all of our buttons available in 17 00:00:58,980 --> 00:01:00,810 the in the body. 18 00:01:01,200 --> 00:01:04,190 And we can access these using JavaScript. 19 00:01:04,560 --> 00:01:06,750 So let me give you a quick sneak peek. 20 00:01:06,750 --> 00:01:10,920 And this is JavaScript object that's actually a giant JavaScript object. 21 00:01:11,070 --> 00:01:13,560 And we are going to be covering objects in more detail. 22 00:01:14,010 --> 00:01:20,190 So this was just for those of you that do want to have a more modern way of selecting elements, then 23 00:01:20,220 --> 00:01:21,800 this is the lesson for you. 24 00:01:22,050 --> 00:01:26,670 So we want to select all of the buttons on the page so all the elements with the button tag. 25 00:01:26,880 --> 00:01:28,860 So we're using the document object. 26 00:01:28,870 --> 00:01:31,050 So this is the same one that we've printed out here. 27 00:01:31,200 --> 00:01:37,080 And because we're able to access the document, this gives us the ability to select the elements on 28 00:01:37,080 --> 00:01:39,270 the page, all using JavaScript. 29 00:01:39,450 --> 00:01:45,450 So we use a built in method within the document called Query Selector All, and then we need to specify 30 00:01:45,480 --> 00:01:46,530 what we want to select. 31 00:01:46,830 --> 00:01:49,920 We're selecting all the elements with the button tag. 32 00:01:50,070 --> 00:01:58,560 And now if I do console log buttons, you're going to see that we've got all of them within this list 33 00:01:58,560 --> 00:01:59,100 format. 34 00:01:59,100 --> 00:02:01,020 So we've got all three different buttons. 35 00:02:01,290 --> 00:02:07,770 So that means that we can access the buttons one by one and because we can access the buttons, we can 36 00:02:07,770 --> 00:02:11,370 also have an event listener for those buttons. 37 00:02:11,610 --> 00:02:14,240 So see how to add those in as well. 38 00:02:14,370 --> 00:02:18,390 So we've got various buttons built into JavaScript as well. 39 00:02:18,390 --> 00:02:21,900 So there's these click events that we can set up. 40 00:02:21,900 --> 00:02:27,900 So we've got an on click and then we just need to select the function and it is expecting a function 41 00:02:27,900 --> 00:02:30,660 on the other side of the equals sign. 42 00:02:30,780 --> 00:02:33,420 So that's why we don't have the invoking of the function. 43 00:02:33,420 --> 00:02:34,920 We don't have the rounded brackets. 44 00:02:35,130 --> 00:02:36,360 We don't have to include those. 45 00:02:36,540 --> 00:02:42,150 So do the same thing for the second button, going to the second message and then the third button and 46 00:02:42,180 --> 00:02:43,080 the third message. 47 00:02:43,200 --> 00:02:47,850 And this will make a lot more sense when we look at arrays, because this is within an array format. 48 00:02:47,850 --> 00:02:50,940 It's called a node list, but it's similar to arrays. 49 00:02:51,180 --> 00:02:55,770 So now whenever we click the buttons, you're going to see that we're able to invoke the functions and 50 00:02:55,770 --> 00:03:01,470 we've got the exact same functionality, but we have stripped it out of the HTML and brought it all 51 00:03:01,470 --> 00:03:02,670 into JavaScript. 52 00:03:02,820 --> 00:03:05,880 So this is a more modern way of doing the Arncliffe. 53 00:03:05,910 --> 00:03:10,440 Now you can use whichever one you prefer while you're learning JavaScript you can use. 54 00:03:10,560 --> 00:03:15,270 And there's also another way to do this as well, when we look at the DOM in more detail. 55 00:03:15,270 --> 00:03:18,570 So you can try this out as well and add this into your project.