This lesson, we want to select the value of this input field and output that value into the entire
text of output element.
So let's first of all, grab our input value and we can call this let's call this cost using documents.
We're going to use query selector again.
So Corey Selecter making a selection of that element, that input field.
So going back into our HTML, we see that it's input type number and we only have the one input so we
can go ahead and just use input, just as we did with button selecting that input.
And now what we want to do is we want to get the value that's associated with it.
So the value in here is not the entire text or the inner HTML.
This is just dort value within that object.
So instead of console logging the word click, we're going to take the cost object and output the value
that's associated with it.
So try that out and you can see that we're getting the value of one hundred.
So what happens if we update it to one hundred thousand or ten thousand?
We're still getting that value added in there.
So whatever this value is at the current time, even though we're using const, it's we're relating
it to that object.
And within the object we can update the values and have it put out an output here within our JavaScript
when we're listening to the ADD event listener.
The other option as well is that.
Oftentimes you're going to find this placed within the actual event listener, so you can do that as
well in grabbing that input, so you're always going back out to that element and making that selection
in case something has changed.
So in case you've got some more dynamic content within your page, you might want to place that within
the ADD event listener as well.
So for now, what we'll do is we'll added into the ADD event listener.
But as you know, you can keep it on the outside as well within the global scope of this object.
So now that we've got the value, we can take that value and we can make some calculations on that value.
So going back into here, we've got our value and we can make use of that value.
So if we were to take our value and we want it to multiply it, 15 percent is of whatever value is entered
in there.
When we class tip, you can see that within the console we're outputting 50 percent.
So what happens if we get and if we add in a decimal in there, you're going to see that we're going
to go to a dollar value.
But we've also got more than two decimal places in from the sense.
And there's a way to fix that.
And I'll show you that in the upcoming lesson, using a JavaScript method that will limit the number
of decimals that we're going to have within our value to two.
So that's coming up next.
So go ahead and try this out for yourself, get the value of the input, and then you can make use of
it within your JavaScript.
So try to.