Hello and welcome in this lesson, we're going to be setting up some HTML, setting up an element that
we can use from JavaScript in order to make our selection and update some of the element properties.
So first, that we want to do is select that element.
And currently on the page, all we're going to have is that one div and currently it's an empty div.
There's nothing reknit written in it.
And I'm going to write Hello World within the div.
Refresh it and you can see it appears on the screen.
So that's all we currently have for content within the page.
Or you use JavaScript in order to select that element and because it's going to be selecting that instance
of that element, connecting to that element, you can use const in order to make your selection and
give it a variable name and then using the document object.
So document and query selector method, go ahead and select the element.
And because we only have the one div, our selection process is fairly simple and straightforward.
Once you've made the selection of the element, that means that you've connected that element to this
object name and you can utilize that in JavaScript.
So if your output in your console, you're going to see that cell element shows up.
Also additionally, we're going to be creating a few other elements are going to create an input.
So this is just a regular text input.
And I'll show you how you can get the contents of that, as well as the contents of the div in the upcoming
lesson.
And then also we're going to be adding an event listener to a button.
So currently we'll give it a name and this can just be first name.
And also we'll put a default value here and we'll close that off.
So the same way that we selected the div, we're going to select the input and I'm going to call it
select input.
Actually, we'll call it a C input.
So that's an SC I capital input in the same way that we made the selection with Query Selector.
Go ahead and make a selection of the input and you can selected by the tag name.
And you could also be more specific because we do have a name value.
So in case you've got more than one input, you can make a more precise selection using the name attribute.
So now that we want to select that input, we can see that we've got the connection to that value.
And if we do want to see the value that's contained within there, we can type that out into value.
And that's going to return back the current value of Lowrance, whereas the select input and if we do
text content, that's going to return back that current value of the text that's contained within that
element.
So go ahead and try this out.
And coming up next, we're going to add a button and introduce adding and listening for events.
So that's still to come in the upcoming lesson.