1
00:00:00,510 --> 00:00:06,090
Hello and welcome in this lesson, we're going to be setting up some HTML, setting up an element that

2
00:00:06,090 --> 00:00:12,290
we can use from JavaScript in order to make our selection and update some of the element properties.

3
00:00:12,540 --> 00:00:15,450
So first, that we want to do is select that element.

4
00:00:15,630 --> 00:00:21,000
And currently on the page, all we're going to have is that one div and currently it's an empty div.

5
00:00:21,000 --> 00:00:22,890
There's nothing reknit written in it.

6
00:00:23,010 --> 00:00:25,830
And I'm going to write Hello World within the div.

7
00:00:25,830 --> 00:00:28,860
Refresh it and you can see it appears on the screen.

8
00:00:29,160 --> 00:00:32,550
So that's all we currently have for content within the page.

9
00:00:32,740 --> 00:00:39,300
Or you use JavaScript in order to select that element and because it's going to be selecting that instance

10
00:00:39,300 --> 00:00:45,060
of that element, connecting to that element, you can use const in order to make your selection and

11
00:00:45,060 --> 00:00:49,090
give it a variable name and then using the document object.

12
00:00:49,110 --> 00:00:55,590
So document and query selector method, go ahead and select the element.

13
00:00:55,890 --> 00:01:01,620
And because we only have the one div, our selection process is fairly simple and straightforward.

14
00:01:01,770 --> 00:01:07,800
Once you've made the selection of the element, that means that you've connected that element to this

15
00:01:07,800 --> 00:01:10,820
object name and you can utilize that in JavaScript.

16
00:01:11,040 --> 00:01:15,870
So if your output in your console, you're going to see that cell element shows up.

17
00:01:15,900 --> 00:01:20,730
Also additionally, we're going to be creating a few other elements are going to create an input.

18
00:01:21,030 --> 00:01:23,310
So this is just a regular text input.

19
00:01:23,550 --> 00:01:29,520
And I'll show you how you can get the contents of that, as well as the contents of the div in the upcoming

20
00:01:29,520 --> 00:01:29,940
lesson.

21
00:01:30,120 --> 00:01:33,780
And then also we're going to be adding an event listener to a button.

22
00:01:34,260 --> 00:01:37,950
So currently we'll give it a name and this can just be first name.

23
00:01:38,280 --> 00:01:41,930
And also we'll put a default value here and we'll close that off.

24
00:01:41,940 --> 00:01:46,980
So the same way that we selected the div, we're going to select the input and I'm going to call it

25
00:01:46,980 --> 00:01:48,000
select input.

26
00:01:48,240 --> 00:01:51,750
Actually, we'll call it a C input.

27
00:01:51,960 --> 00:01:58,770
So that's an SC I capital input in the same way that we made the selection with Query Selector.

28
00:01:58,770 --> 00:02:03,570
Go ahead and make a selection of the input and you can selected by the tag name.

29
00:02:03,600 --> 00:02:08,580
And you could also be more specific because we do have a name value.

30
00:02:08,700 --> 00:02:16,260
So in case you've got more than one input, you can make a more precise selection using the name attribute.

31
00:02:16,270 --> 00:02:22,140
So now that we want to select that input, we can see that we've got the connection to that value.

32
00:02:22,320 --> 00:02:27,870
And if we do want to see the value that's contained within there, we can type that out into value.

33
00:02:28,020 --> 00:02:34,110
And that's going to return back the current value of Lowrance, whereas the select input and if we do

34
00:02:34,110 --> 00:02:41,130
text content, that's going to return back that current value of the text that's contained within that

35
00:02:41,130 --> 00:02:41,520
element.

36
00:02:41,580 --> 00:02:42,870
So go ahead and try this out.

37
00:02:43,110 --> 00:02:48,870
And coming up next, we're going to add a button and introduce adding and listening for events.

38
00:02:48,900 --> 00:02:50,820
So that's still to come in the upcoming lesson.