WEBVTT 0 00:00.140 --> 00:01.100 Did you give it a go? 1 00:01.130 --> 00:06.500 It's actually quite a tricky one because as I mentioned, we're going to be using the name attribute 2 00:06.500 --> 00:09.680 to execute an inline event listener. 3 00:09.680 --> 00:13.460 I know sounds like a lot of big words, but it really is quite simple. 4 00:13.460 --> 00:15.200 Let's set up our HTML document. 5 00:15.200 --> 00:18.200 In here we can have a head and then a style section. 6 00:19.250 --> 00:20.840 And for now, let's just leave it blank. 7 00:20.870 --> 00:24.830 Let's first write up our HTML, and then we can have a body. Right in our body, 8 00:24.830 --> 00:31.910 let's create a heading tag called output ... "Output Element in Action". 9 00:31.910 --> 00:34.100 Here, I want to create a form. 10 00:34.100 --> 00:36.950 We don't need an action because we're not submitting this to a server. 11 00:36.950 --> 00:39.830 And I want, let's say two inputs 12 00:39.830 --> 00:42.980 with type numbers, right, because we are multiplying one number by another. 13 00:42.980 --> 00:47.390 So the input needs to be of type number. It won't make sense to have characters. 14 00:47.390 --> 00:49.970 Let's give it a name of `num1`. 15 00:49.970 --> 00:52.790 This is the first number the user is going to type. 16 00:52.790 --> 00:56.630 And then I want exactly the same thing, type of number 17 00:56.630 --> 00:58.220 but name can be `num2`. 18 00:58.250 --> 01:00.770 We don't need an ID once again. 19 01:00.920 --> 01:02.240 So there we go. 20 01:02.240 --> 01:04.310 That's our first number, 21 01:04.310 --> 01:08.810 we know then that's going to be multiplied by the second number. 22 01:08.810 --> 01:11.780 And this is going to be equal to the answer. 23 01:11.780 --> 01:15.320 And the answer we want needs to be inserted in what? 24 01:15.740 --> 01:16.610 That's right. 25 01:16.610 --> 01:18.560 We are dealing with the output element. 26 01:18.560 --> 01:21.860 So we want the answer displayed in an output element. 27 01:21.860 --> 01:24.800 So let's create an output element. 28 01:24.800 --> 01:31.190 And again, in order to identify this output in our event listener, our inline event listener, we need to 29 01:31.190 --> 01:33.050 give it a name attribute. 30 01:33.050 --> 01:34.760 And the name attribute we can give 31 01:34.760 --> 01:35.510 it can be anything. 32 01:35.510 --> 01:38.690 Let's just call it outputElement 33 01:38.960 --> 01:40.160 for lack of a better word. 34 01:40.160 --> 01:47.600 We can start off with 0. But obviously the textContent or the innerHTML is going to be changed dynamically. 35 01:47.600 --> 01:50.150 So let's look at what this looks like in the browser. 36 01:50.150 --> 01:52.460 Hey how cool, how cool 😎. 37 01:52.460 --> 01:52.910 You know what? 38 01:53.120 --> 01:54.470 We don't even need to style this. 39 01:54.470 --> 01:55.580 I think this is fine. 40 01:56.660 --> 01:58.970 You know, right now, obviously the numbers do nothing. 41 01:59.300 --> 02:01.340 Um, because we haven't defined any JavaScript. 42 02:01.340 --> 02:04.880 We've just set this output element static at 0. 43 02:04.910 --> 02:06.620 How do we make it dynamic? 44 02:06.650 --> 02:12.200 Well, like I said in the introduction, let's create an inline event listener. 45 02:12.530 --> 02:14.150 I know it's not the best way to do things. 46 02:14.150 --> 02:18.230 If you've seen my DOM courses, I don't really like using inline event listeners, 47 02:18.230 --> 02:22.820 it's much better to do it externally, for example via the addEventListener() method. 48 02:22.820 --> 02:23.960 But anyway, it'll do 49 02:23.960 --> 02:24.290 for now. 50 02:24.290 --> 02:27.380 I don't want to include <script> tags and create too much confusion. 51 02:27.380 --> 02:34.460 So what we can do when we listen for the `oninput` event is we can execute it directly inline, and we 52 02:34.460 --> 02:35.930 can listen for it just like this, 53 02:35.930 --> 02:39.260 we can include it as an attribute `oninput`. 54 02:39.890 --> 02:41.420 It is really this simple. 55 02:41.570 --> 02:48.590 So now every time this oninput event is fired, we can now define JavaScript inline in order for the 56 02:48.590 --> 02:49.910 parser to execute. 57 02:50.570 --> 02:54.650 So, we want to now get the output element don't we? 58 02:54.830 --> 02:57.440 And we've defined its name as outputElement. 59 02:57.440 --> 02:58.280 Can you see it. 60 02:59.120 --> 03:02.810 So, let's access the outputElement. 61 03:03.050 --> 03:04.700 We want to change what? 62 03:05.060 --> 03:05.570 That's right, 63 03:05.570 --> 03:07.820 we want to change the textContent. 64 03:07.820 --> 03:09.830 And what do we want to assign that to? 65 03:09.830 --> 03:17.780 We want to assign it to literally the number one value, times the number two value. It really is that simple. 66 03:17.780 --> 03:21.710 So it's going to be number-one times [multiplied by] number-two. 67 03:21.740 --> 03:25.760 We've given the first input the name of num1. 68 03:25.760 --> 03:32.180 And we know to access the value of any form control that we have to access the `value` property. 69 03:32.780 --> 03:34.310 And that's all there is to it 70 03:34.310 --> 03:37.190 my dear students ... num2, we do the same thing, 71 03:37.190 --> 03:39.350 we grab its value property. 72 03:39.350 --> 03:42.170 It really cannot get more easier than this. 73 03:42.170 --> 03:47.600 If we go to our browser, let's multiply, I don't know, 5 by 5. 74 03:47.600 --> 03:48.140 (sound: yeah). 75 03:48.140 --> 03:50.060 How awesome is this? Man, 76 03:50.060 --> 03:51.020 I have a lot of fun. 77 03:51.020 --> 03:53.090 And of course you know it's dynamic. 78 03:53.090 --> 03:55.520 You can you can multiply whatever you want. 79 03:55.790 --> 03:56.990 Very very cool. 80 03:56.990 --> 04:02.600 So this is just a very quick example of us using the `oninput` event, 81 04:02.600 --> 04:07.280 and whenever that event is fired, we display the results in an output element. 82 04:07.280 --> 04:08.900 I hope it's becoming more intuitive. 83 04:08.900 --> 04:11.720 I hope you're having a lot of fun and I'll see you in the next lecture.