WEBVTT

00:00:07.200 --> 00:00:15.030
In this video we're going to learn how to use javascript to respond to clicks on buttons.

00:00:15.030 --> 00:00:23.290
All right so it isn't just going to change quickly the name of our first file of numbers and now we're

00:00:23.310 --> 00:00:28.540
going to create a new file called buttons.

00:00:28.880 --> 00:00:39.220
A simple let's copy the source code from the first file.

00:00:41.010 --> 00:00:42.090
OK.

00:00:42.540 --> 00:00:51.800
So following the paragraph we are going to create a button.

00:00:53.130 --> 00:00:54.680
The syntax is.

00:00:54.980 --> 00:01:00.670
But then let's add some text here.

00:01:00.700 --> 00:01:04.880
Scene click me.

00:01:04.890 --> 00:01:05.950
All right.

00:01:06.150 --> 00:01:06.450
So

00:01:09.600 --> 00:01:22.020
one way of abusing allocating actions to buttons is by using beauts called on click inside the button

00:01:22.020 --> 00:01:22.750
tag.

00:01:23.400 --> 00:01:31.970
And we can write the javascript function straightaway here without a semicolon.

00:01:32.250 --> 00:01:33.960
So for instance we can say let's

00:01:37.150 --> 00:01:37.610
see

00:01:41.420 --> 00:01:42.320
how

00:01:45.720 --> 00:01:48.240
can I help you.

00:01:50.030 --> 00:01:50.960
OK.

00:01:51.480 --> 00:01:55.310
So if you click on the button you can see this message.

00:01:55.530 --> 00:01:57.270
How can I help you.

00:01:57.350 --> 00:01:58.040
OK.

00:01:58.590 --> 00:02:06.280
So this is one way of using javascript in the On Click attributes of a button.

00:02:06.630 --> 00:02:10.520
Another way is by writing the scripts.

00:02:11.280 --> 00:02:15.690
So let's get rid of the source of abuse.

00:02:15.720 --> 00:02:19.320
You know scripts and also this gets rid of it because we don't need it.

00:02:19.730 --> 00:02:24.750
And this writes a statesman's here.

00:02:24.750 --> 00:02:38.850
So basically we get to access the button first and then we get to tell the browser when the user clicks

00:02:38.910 --> 00:02:40.420
on the button.

00:02:40.650 --> 00:02:43.670
Then you're going to have to execute a function.

00:02:43.920 --> 00:02:45.480
That's what we're trying to achieve.

00:02:46.080 --> 00:02:46.720
OK.

00:02:46.950 --> 00:02:49.180
So let's create a second button.

00:02:49.650 --> 00:02:50.460
Just for clarity

00:02:54.100 --> 00:02:55.530
Let's put some text

00:02:58.690 --> 00:02:59.900
me as well.

00:02:59.930 --> 00:03:05.640
And we need to give it an ID OK.

00:03:06.420 --> 00:03:21.290
IDS going to be button to for example and now we are going to go to the book and object.

00:03:22.830 --> 00:03:30.900
And then we're going to use a method one of the methods of the document objects and this method is going

00:03:30.900 --> 00:03:32.990
to be get elements by ID.

00:03:33.420 --> 00:03:34.930
So we're trying to do here.

00:03:34.930 --> 00:03:41.930
We're trying to access the button using the ID of the button.

00:03:42.240 --> 00:03:51.640
Ok so if we continue going to need to put the string there which refers to the ID of the elements and

00:03:51.640 --> 00:03:53.860
is going to be a button too.

00:03:54.700 --> 00:03:58.190
OK.

00:03:59.200 --> 00:04:11.580
And then we need to specify the events that will lead to the execution of the function.

00:04:11.580 --> 00:04:13.900
So in our case we're looking for a click.

00:04:13.920 --> 00:04:18.480
So we need the user to click on the button so that we can execute the function.

00:04:19.020 --> 00:04:23.210
So we are going to say here the event is clicking so it's on click.

00:04:23.730 --> 00:04:24.710
All right.

00:04:25.140 --> 00:04:27.210
And then we're going to say equal

00:04:29.880 --> 00:04:39.400
function OK the sort of sense that syntax is function and then open brackets close brackets and then

00:04:39.400 --> 00:04:43.170
we're going to need to open it curly brackets

00:04:45.990 --> 00:04:50.460
and bits for the contents of the function.

00:04:50.460 --> 00:04:51.260
All right.

00:04:51.870 --> 00:04:57.480
So for instance we can write in other statements in the function saying let's

00:05:00.150 --> 00:05:07.280
say for example you have a we need a string that we need good code.

00:05:07.280 --> 00:05:12.950
So you just click it.

00:05:13.130 --> 00:05:15.740
Me.

00:05:16.060 --> 00:05:20.040
OK so we're just going to seek the syntax on click.

00:05:20.040 --> 00:05:23.550
You need to refresh the page just to see.

00:05:23.630 --> 00:05:25.840
And now he's working.

00:05:26.520 --> 00:05:38.220
So we have seen how to use javascript to respond to clicks on buttons as you see and actually the suggestions

00:05:38.970 --> 00:05:42.270
when we were choosing the on click function.

00:05:42.270 --> 00:05:45.810
There are other functions other events that you can use.

00:05:45.810 --> 00:05:48.500
There is an DoubleClick etc..

00:05:48.510 --> 00:05:50.220
So when you are

00:05:53.760 --> 00:05:57.600
adding the event then you can see many events.

00:05:57.600 --> 00:06:09.090
So on one of them is on Plake you can use doubleclick on mouse outs on mouse over be free for use on

00:06:09.090 --> 00:06:10.590
mouse over for instance.

00:06:10.870 --> 00:06:11.430
OK.

00:06:11.440 --> 00:06:16.220
So that means when you when we vote on the elements then the message will appear.

00:06:16.230 --> 00:06:18.510
So we need to refresh the page again.

00:06:18.540 --> 00:06:25.050
Now if you're over on the bus and without clicking on it now you can see the message showing up.

00:06:25.420 --> 00:06:25.730
OK

00:06:30.420 --> 00:06:40.000
let's go back to our previous events.

00:06:40.390 --> 00:06:46.190
So it was well buttons.

00:06:47.460 --> 00:06:53.070
OK so in the next video we will learn how to change a shemale content using javascript