1
00:00:00,090 --> 00:00:05,070
Oh, and welcome back, let's introduce JavaScript into the project, selecting the elements and adding

2
00:00:05,070 --> 00:00:07,200
event listeners to those elements.

3
00:00:07,440 --> 00:00:12,390
So setting up some variables, setting up a contest, and this is going to be the one that we can output

4
00:00:12,390 --> 00:00:14,670
content message content to the user.

5
00:00:14,820 --> 00:00:20,430
So using documents and query selector in order to select that element, selecting the element with the

6
00:00:20,430 --> 00:00:26,040
class of output and then adding it in as an object in JavaScript, there's a few other variables that

7
00:00:26,040 --> 00:00:26,700
we're going to need.

8
00:00:26,880 --> 00:00:30,870
We're going to need to get the buttons so we can grab all of the buttons.

9
00:00:31,050 --> 00:00:38,820
So just do that as BTE ends and query selector all for this one because we've got multiple buttons.

10
00:00:39,060 --> 00:00:43,350
So selecting all of the elements that have a tag of.

11
00:00:43,350 --> 00:00:46,650
But and then also we need to get the inputs.

12
00:00:46,660 --> 00:00:52,890
So let's create another element and we can call this one, maybe we can call it get values or values

13
00:00:53,850 --> 00:00:55,070
using document.

14
00:00:55,350 --> 00:00:58,530
And this one has multiple elements as well that we need to select.

15
00:00:58,740 --> 00:01:03,830
So using queries select are all selecting all of the elements with the tag of input.

16
00:01:04,170 --> 00:01:09,470
So this gives us the ability to grab the elements and we're going to add event listeners afterwards.

17
00:01:10,080 --> 00:01:15,810
Usually I like to check to make sure that I do have the elements selected properly and I use that the

18
00:01:15,810 --> 00:01:16,830
console for this.

19
00:01:17,070 --> 00:01:23,460
So see, when I output output, you see, it selects the element that is related to that object.

20
00:01:23,760 --> 00:01:26,400
The Beaton's should return back a node list.

21
00:01:26,670 --> 00:01:28,050
We've got four buttons.

22
00:01:28,050 --> 00:01:31,980
You see that all of the buttons are represented within the node list as well.

23
00:01:31,980 --> 00:01:33,420
We've got get values.

24
00:01:33,570 --> 00:01:35,550
So this is a node list of three.

25
00:01:35,550 --> 00:01:38,220
We've got three inputs that are contained in here.

26
00:01:38,550 --> 00:01:40,500
Let's add in our event listeners.

27
00:01:40,860 --> 00:01:47,340
So selecting our buttons, we're going to loop through all of the available elements in the node list.

28
00:01:47,700 --> 00:01:54,660
So doing a four each and we can just select function and this can just have a variable name of B10.

29
00:01:55,050 --> 00:02:01,320
So as we iterate through Allfirst all console logout BTM so you can see that we're actually going to

30
00:02:01,320 --> 00:02:07,530
get all of the elements, all of the elements that have a tag of button, and that is actually all of

31
00:02:07,530 --> 00:02:09,930
the buttons that are visible to the user.

32
00:02:10,230 --> 00:02:13,230
So we want to add an event listener to the BTM.

33
00:02:13,470 --> 00:02:21,150
So selecting the BTM object and we're adding event listener to that B10 object and then we'll distinguish

34
00:02:21,150 --> 00:02:23,660
between the different buttons within the function.

35
00:02:23,670 --> 00:02:28,160
So this is the button action and we'll create a function in order to handle that.

36
00:02:28,830 --> 00:02:36,060
So going down just below, let's create that function button action and we're passing in the event object

37
00:02:36,060 --> 00:02:39,630
and for now we can console out event object.

38
00:02:39,960 --> 00:02:45,090
So now whenever I click one of these buttons, we get the event object I would put into the console

39
00:02:45,150 --> 00:02:50,700
within the button action function where we've got the handling of the different button actions we can

40
00:02:50,700 --> 00:02:57,840
check to see which one and which value actually was being invoked, where we can get the inner text

41
00:02:57,840 --> 00:03:01,050
from the element if we want, as well as we could use the classes.

42
00:03:01,170 --> 00:03:06,480
But the classes are just named buttons one, two and three, so they don't really provide the distinction

43
00:03:06,480 --> 00:03:07,200
that we need.

44
00:03:07,290 --> 00:03:10,860
You could also set that information into the class if you wanted to.

45
00:03:10,860 --> 00:03:14,910
So selecting that element, we can get that current element value.

46
00:03:14,940 --> 00:03:19,050
So selecting that event object and then the source element.

47
00:03:19,050 --> 00:03:24,810
And now when you get source element that's returning back, that element information that's triggering

48
00:03:24,810 --> 00:03:25,520
the event.

49
00:03:25,530 --> 00:03:29,940
So this is a variable within that event object where we've got the source element.

50
00:03:30,180 --> 00:03:35,520
So we're able to select the source element and then we can get the inner text that's contained within

51
00:03:35,520 --> 00:03:36,570
that source element.

52
00:03:36,600 --> 00:03:40,860
So that gives us the contents of the button that's being pressed.

53
00:03:40,860 --> 00:03:47,760
And this means that we can check against that to check to make sure that we are getting that value correctly.

54
00:03:47,860 --> 00:03:53,550
We're going to split this string as well, because we only need to know, set, get delete and all.

55
00:03:53,670 --> 00:03:57,690
We don't need to know the rest of what's contained within that inner text.

56
00:03:57,690 --> 00:04:04,890
So let's do a substring of that and we'll slice that at the index value so we can get that value.

57
00:04:04,920 --> 00:04:06,040
We can call it temp.

58
00:04:06,060 --> 00:04:12,180
So selecting this content that we've just outputted into the console, we can use substring, which

59
00:04:12,180 --> 00:04:14,490
gives us a chunk of the string that we're returning.

60
00:04:14,700 --> 00:04:21,810
So when I was starting position of zero and then what we want is we want to return back that substring

61
00:04:21,810 --> 00:04:25,920
and using index of is going to return back an index value.

62
00:04:26,040 --> 00:04:28,200
And this is where we're just going to have a space.

63
00:04:28,470 --> 00:04:30,900
So return back index of space.

64
00:04:31,290 --> 00:04:38,070
And you can see when you output index of space for that value, you're going to get a number being return

65
00:04:38,070 --> 00:04:38,280
there.

66
00:04:38,280 --> 00:04:41,460
And I'll also console log out the value of temp.

67
00:04:41,460 --> 00:04:47,790
So now whenever we click one of these, you can see that we're getting an index value of three.

68
00:04:47,910 --> 00:04:53,670
So we're returning back all of the characters from zero to three, not including three, the same thing

69
00:04:53,670 --> 00:04:55,860
with get, same thing with delete.

70
00:04:55,860 --> 00:04:57,360
So we're turning back zero.

71
00:04:57,390 --> 00:04:59,880
One, two, three, four, five.

72
00:05:00,110 --> 00:05:06,500
And breaking at six or turning all of those characters back, so that gives us a shortened value that

73
00:05:06,500 --> 00:05:12,440
we can work with in order to detect which button has been clicked and then we can take different actions

74
00:05:12,620 --> 00:05:14,150
depending on the button that was clicked.

75
00:05:14,160 --> 00:05:15,740
So go ahead and set that up.

76
00:05:15,860 --> 00:05:22,190
And coming up next, we'll add in the conditions as well as I want to set this default value for the

77
00:05:22,190 --> 00:05:24,740
calendar entry as one week from now.

78
00:05:24,920 --> 00:05:26,870
So I don't always have to select it.

79
00:05:27,050 --> 00:05:28,240
So we're going to do that as well.

80
00:05:28,250 --> 00:05:29,720
And that's coming up in the next lesson.