1
00:00:00,510 --> 00:00:01,390
Welcome back.

2
00:00:01,410 --> 00:00:06,720
This lesson, we are going to update some of the content on the page, mainly within the div, getting

3
00:00:06,720 --> 00:00:11,790
content from the input as the user takes an action on the submit button.

4
00:00:12,030 --> 00:00:15,390
So let's put this all together and we really have everything in place.

5
00:00:15,690 --> 00:00:23,790
We saw earlier that we can get the element input content by doing SC input value because we've attached

6
00:00:23,790 --> 00:00:28,080
SC input variable to that object within the DOM.

7
00:00:28,110 --> 00:00:32,700
So if we get the value of it, we can return back whatever the current value is.

8
00:00:33,030 --> 00:00:40,560
So if this value updates at any point and whenever we look for the value, you can see that we can also

9
00:00:40,560 --> 00:00:41,820
get that updated value.

10
00:00:41,850 --> 00:00:46,130
So whatever that value currently is within the input, that's what we want to return back.

11
00:00:46,140 --> 00:00:53,310
And we also saw that we can get the value of the div where we've got our selected input element of the

12
00:00:53,310 --> 00:00:53,790
div.

13
00:00:53,950 --> 00:01:00,450
And if we do text content and there is a number of ways there's an HTML in our text, so there's a number

14
00:01:00,450 --> 00:01:06,900
of ways of selecting that content and it's going to return back the current value as we're able to retrieve

15
00:01:06,900 --> 00:01:13,620
back values were also able to assign values and the DOM elements work in the same way as other objects

16
00:01:13,620 --> 00:01:20,010
in JavaScript, where if we want it to make a selection so you can get the select input value.

17
00:01:20,050 --> 00:01:25,590
So this is the same one that we've output here on the right hand side in the console, and we can update

18
00:01:25,590 --> 00:01:33,540
it to whatever the value is and we can also do it the other way around so we can take the select element

19
00:01:33,720 --> 00:01:39,480
in our HTML text content or in our text and use text content in this instance.

20
00:01:39,510 --> 00:01:43,620
So what's going to happen now within the code whenever we click the button?

21
00:01:43,630 --> 00:01:45,980
So we've still got that button action active.

22
00:01:45,980 --> 00:01:52,470
If we're going to update the content that's contained within that SQL element object that's connected

23
00:01:52,470 --> 00:01:57,960
to the div on the page and the value that we're going to set in there is going to be whatever value

24
00:01:57,960 --> 00:02:00,240
is contained within the input value.

25
00:02:00,240 --> 00:02:03,210
And we can saw that, that we can retrieve that value back.

26
00:02:03,400 --> 00:02:05,390
So this stretches back a string value.

27
00:02:05,400 --> 00:02:12,660
So let's do a refresh and hit submit and you can see that we've updated the value of the input using

28
00:02:12,660 --> 00:02:13,770
the submit button.

29
00:02:13,770 --> 00:02:20,460
So whatever this value updates, whenever our input changes, we can hit submit and we could update

30
00:02:20,460 --> 00:02:22,200
the value within the interim HTML.

31
00:02:22,380 --> 00:02:29,190
If you go to inspect, you can see that the DOM has updated and within the div, this isn't within the

32
00:02:29,190 --> 00:02:34,140
original source, but it's the current active source now that we've updated it.

33
00:02:34,320 --> 00:02:40,830
So because this is connected to the DOM are elements, variables are connected to the same DOM objects,

34
00:02:41,010 --> 00:02:45,280
and then when we make any updates, you can see it gets updated within the page.

35
00:02:45,300 --> 00:02:46,800
So go ahead and try this out.

36
00:02:47,100 --> 00:02:53,070
We're going to create a more interactive format to connect to Elements and the DOM that's still to come

37
00:02:53,070 --> 00:02:54,330
in the upcoming lessons.