1
00:00:00,480 --> 00:00:06,390
This is going to be a super quick lesson on how to execute a function from an HTML element.

2
00:00:06,630 --> 00:00:11,400
Now, typically you're going to there's a lot of better ways to do this, especially when it comes to

3
00:00:11,400 --> 00:00:18,300
the dorm and selecting elements and then adding event listeners on elements directly using JavaScript

4
00:00:18,300 --> 00:00:19,640
in interacting with the dorm.

5
00:00:19,890 --> 00:00:22,110
But in this case, we haven't gotten that far yet.

6
00:00:22,320 --> 00:00:29,930
And we want to have an introduction to adding functionality into HTML elements such as buttons.

7
00:00:30,180 --> 00:00:35,370
So when you click a button and invokes a function and essentially this is a quick and easy way to do

8
00:00:35,370 --> 00:00:41,700
this, where you add an on click event as an attribute within your HTML element and then you have the

9
00:00:41,700 --> 00:00:42,740
JavaScript code.

10
00:00:42,870 --> 00:00:48,060
And in this case we're invoking function message one, message two, message three.

11
00:00:48,070 --> 00:00:54,000
In some cases you might still see this and often you won't because we're trying to separate out the

12
00:00:54,210 --> 00:00:55,800
HTML and the JavaScript.

13
00:00:55,980 --> 00:00:59,400
So go ahead and try this and add this into HTML.

14
00:00:59,610 --> 00:01:06,330
So selecting a button, adding an on click and then invoking functions, giving a message, one message

15
00:01:06,330 --> 00:01:09,780
to an message three and you can put them in the console.

16
00:01:10,110 --> 00:01:12,470
We can have various counters that increment.

17
00:01:12,690 --> 00:01:18,150
So every time one of the buttons is clicked, it will increment the counter accordingly and then output

18
00:01:18,150 --> 00:01:21,260
the message and the console with all three values.

19
00:01:21,690 --> 00:01:24,590
So go ahead and set this up and I'll walk you through it coming up.

20
00:01:24,600 --> 00:01:30,360
So opening up our Ed, we are going to have to open up the HTML file, and in this case, we need to

21
00:01:30,360 --> 00:01:34,290
add some HTML and that's going to be some button elements.

22
00:01:34,560 --> 00:01:40,760
So it's on Click and then you invoke the function that you want to invoke whenever the button gets clicked.

23
00:01:40,770 --> 00:01:43,980
So we've got our button, one button to add button three.

24
00:01:44,130 --> 00:01:47,940
So whatever happens, it's going to happen directly here, the set of counters.

25
00:01:48,270 --> 00:01:49,950
So a number of different variables.

26
00:01:50,340 --> 00:01:54,870
So declaring variable and var to anvar three.

27
00:01:54,870 --> 00:02:02,370
So declare the three variables and then take var one and var to Anvar three and we're going to equal

28
00:02:02,370 --> 00:02:03,960
all of them to zero.

29
00:02:04,140 --> 00:02:11,490
And then whenever this message gets clicked, let's take var one and will implement it and then output

30
00:02:11,760 --> 00:02:17,550
another function that's going to take care of our console message and we can duplicate out these functions.

31
00:02:17,550 --> 00:02:19,290
So two and three.

32
00:02:19,620 --> 00:02:23,360
So those are all going to increase depending on what button gets pressed.

33
00:02:23,370 --> 00:02:25,740
And then lastly, let's do our function.

34
00:02:25,860 --> 00:02:27,320
That's going to contain the message.

35
00:02:27,330 --> 00:02:30,360
So for the message, this is where we're outputting the console.

36
00:02:30,360 --> 00:02:38,040
We're not passing any arguments onto here console log and we're going to output the values of our one

37
00:02:38,040 --> 00:02:42,060
and then concatenate it with to and of our three.

38
00:02:42,090 --> 00:02:43,440
And a quick refresh.

39
00:02:43,950 --> 00:02:50,040
So now every time these buttons get clicked, you're going to see that we've got the console messages

40
00:02:50,040 --> 00:02:55,050
increasing and we've got kind of a mini counter going on, depending on which button is clicked.

41
00:02:55,380 --> 00:02:58,410
That's going to increment the value accordingly.

42
00:02:58,560 --> 00:03:01,680
And we've got the content going into the console.

43
00:03:01,920 --> 00:03:07,170
And coming up, we're going to use some of this functionality to produce some more interesting stuff

44
00:03:07,170 --> 00:03:07,910
with functions.

45
00:03:07,950 --> 00:03:08,760
So that's still to come.