1
00:00:00,090 --> 00:00:05,820
This lesson, we want to select the value of this input field and output that value into the entire

2
00:00:05,820 --> 00:00:07,960
text of output element.

3
00:00:08,550 --> 00:00:17,220
So let's first of all, grab our input value and we can call this let's call this cost using documents.

4
00:00:17,470 --> 00:00:19,370
We're going to use query selector again.

5
00:00:19,770 --> 00:00:24,000
So Corey Selecter making a selection of that element, that input field.

6
00:00:24,240 --> 00:00:30,780
So going back into our HTML, we see that it's input type number and we only have the one input so we

7
00:00:30,780 --> 00:00:34,820
can go ahead and just use input, just as we did with button selecting that input.

8
00:00:35,130 --> 00:00:39,300
And now what we want to do is we want to get the value that's associated with it.

9
00:00:39,600 --> 00:00:43,700
So the value in here is not the entire text or the inner HTML.

10
00:00:43,830 --> 00:00:46,550
This is just dort value within that object.

11
00:00:46,800 --> 00:00:55,050
So instead of console logging the word click, we're going to take the cost object and output the value

12
00:00:55,050 --> 00:00:56,240
that's associated with it.

13
00:00:56,670 --> 00:01:00,680
So try that out and you can see that we're getting the value of one hundred.

14
00:01:00,960 --> 00:01:04,830
So what happens if we update it to one hundred thousand or ten thousand?

15
00:01:05,010 --> 00:01:07,470
We're still getting that value added in there.

16
00:01:07,590 --> 00:01:14,610
So whatever this value is at the current time, even though we're using const, it's we're relating

17
00:01:14,610 --> 00:01:15,840
it to that object.

18
00:01:16,020 --> 00:01:23,490
And within the object we can update the values and have it put out an output here within our JavaScript

19
00:01:23,490 --> 00:01:25,580
when we're listening to the ADD event listener.

20
00:01:25,830 --> 00:01:28,140
The other option as well is that.

21
00:01:29,290 --> 00:01:36,190
Oftentimes you're going to find this placed within the actual event listener, so you can do that as

22
00:01:36,190 --> 00:01:43,030
well in grabbing that input, so you're always going back out to that element and making that selection

23
00:01:43,090 --> 00:01:44,430
in case something has changed.

24
00:01:44,440 --> 00:01:49,810
So in case you've got some more dynamic content within your page, you might want to place that within

25
00:01:49,810 --> 00:01:51,820
the ADD event listener as well.

26
00:01:52,120 --> 00:01:55,720
So for now, what we'll do is we'll added into the ADD event listener.

27
00:01:55,870 --> 00:02:01,280
But as you know, you can keep it on the outside as well within the global scope of this object.

28
00:02:01,810 --> 00:02:09,140
So now that we've got the value, we can take that value and we can make some calculations on that value.

29
00:02:09,460 --> 00:02:14,430
So going back into here, we've got our value and we can make use of that value.

30
00:02:14,650 --> 00:02:21,580
So if we were to take our value and we want it to multiply it, 15 percent is of whatever value is entered

31
00:02:21,580 --> 00:02:21,940
in there.

32
00:02:22,150 --> 00:02:28,040
When we class tip, you can see that within the console we're outputting 50 percent.

33
00:02:28,420 --> 00:02:34,180
So what happens if we get and if we add in a decimal in there, you're going to see that we're going

34
00:02:34,180 --> 00:02:35,830
to go to a dollar value.

35
00:02:35,830 --> 00:02:41,680
But we've also got more than two decimal places in from the sense.

36
00:02:41,950 --> 00:02:43,360
And there's a way to fix that.

37
00:02:43,450 --> 00:02:49,540
And I'll show you that in the upcoming lesson, using a JavaScript method that will limit the number

38
00:02:49,540 --> 00:02:53,610
of decimals that we're going to have within our value to two.

39
00:02:53,650 --> 00:02:54,680
So that's coming up next.

40
00:02:54,910 --> 00:03:00,280
So go ahead and try this out for yourself, get the value of the input, and then you can make use of

41
00:03:00,280 --> 00:03:01,800
it within your JavaScript.

42
00:03:01,810 --> 00:03:02,380
So try to.