Welcome back.
This lesson, we are going to update some of the content on the page, mainly within the div, getting
content from the input as the user takes an action on the submit button.
So let's put this all together and we really have everything in place.
We saw earlier that we can get the element input content by doing SC input value because we've attached
SC input variable to that object within the DOM.
So if we get the value of it, we can return back whatever the current value is.
So if this value updates at any point and whenever we look for the value, you can see that we can also
get that updated value.
So whatever that value currently is within the input, that's what we want to return back.
And we also saw that we can get the value of the div where we've got our selected input element of the
div.
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
of ways of selecting that content and it's going to return back the current value as we're able to retrieve
back values were also able to assign values and the DOM elements work in the same way as other objects
in JavaScript, where if we want it to make a selection so you can get the select input value.
So this is the same one that we've output here on the right hand side in the console, and we can update
it to whatever the value is and we can also do it the other way around so we can take the select element
in our HTML text content or in our text and use text content in this instance.
So what's going to happen now within the code whenever we click the button?
So we've still got that button action active.
If we're going to update the content that's contained within that SQL element object that's connected
to the div on the page and the value that we're going to set in there is going to be whatever value
is contained within the input value.
And we can saw that, that we can retrieve that value back.
So this stretches back a string value.
So let's do a refresh and hit submit and you can see that we've updated the value of the input using
the submit button.
So whatever this value updates, whenever our input changes, we can hit submit and we could update
the value within the interim HTML.
If you go to inspect, you can see that the DOM has updated and within the div, this isn't within the
original source, but it's the current active source now that we've updated it.
So because this is connected to the DOM are elements, variables are connected to the same DOM objects,
and then when we make any updates, you can see it gets updated within the page.
So go ahead and try this out.
We're going to create a more interactive format to connect to Elements and the DOM that's still to come
in the upcoming lessons.