WEBVTT 0 00:00.140 --> 00:03.230 This is yet another fun, fun example. 1 00:03.230 --> 00:09.050 And I wanted to specifically show you this example because as I said, we can use the oninput event with 2 00:09.050 --> 00:10.340 different types of inputs. 3 00:10.340 --> 00:12.640 And here we're using the range. 4 00:12.650 --> 00:14.780 So let's set it up. Very, very simple. 5 00:14.780 --> 00:17.390 We've got an HTML body. In the body 6 00:17.390 --> 00:18.830 let's just have a paragraph. 7 00:18.980 --> 00:21.530 This is a cool example 8 00:22.810 --> 00:34.390 showing you how to dynamically update the output element by listening for the oninput event. 9 00:34.420 --> 00:36.670 So there is our paragraph - very, very simple. 10 00:36.670 --> 00:37.570 What's next? 11 00:37.600 --> 00:38.470 Very, very simple. 12 00:38.470 --> 00:43.020 Let's create our input and this time it's with type of range. 13 00:43.030 --> 00:45.280 We don't even need a name or an ID. 14 00:45.400 --> 00:47.760 It's going to be that simple of an example. 15 00:47.770 --> 00:48.370 So there we go. 16 00:48.370 --> 00:49.450 But we're not done, are we? 17 00:49.480 --> 00:51.280 Let's go to the browser and see what this looks like. 18 00:51.430 --> 00:52.600 Let me zoom out a bit. 19 00:52.630 --> 00:53.590 We're not done. 20 00:53.800 --> 00:59.110 You can see we've got our range slider, but firstly it never displays values to the user automatically. 21 00:59.110 --> 01:03.400 That's one of the downsides with this range type. And we want to show it dynamically. 22 01:03.400 --> 01:04.450 So what do we do? 23 01:04.480 --> 01:06.520 Well, we need to listen for that event. 24 01:06.550 --> 01:12.550 We can also listen for it inline, by listening for the ... not online, sorry oninput event. 25 01:13.090 --> 01:19.060 And then when the oninput event is fired on this input element, we can either write our JavaScript 26 01:19.060 --> 01:19.960 directly in here. 27 01:19.960 --> 01:20.800 I don't want to do that. 28 01:20.800 --> 01:23.050 I just want to show you another way of doing something. 29 01:23.050 --> 01:28.540 We can execute a function. And let's just call it showOutput. 30 01:28.570 --> 01:33.850 In order to execute a function, you need to follow it by parentheses. 31 01:33.880 --> 01:36.030 That's just a nuance when it comes to JavaScript. 32 01:36.040 --> 01:41.470 The other cool thing when we go and execute a function is we can pass the function, something. We can 33 01:41.470 --> 01:47.650 say, hey, when you execute it, pass something on to the function and here why don't we just pass 34 01:47.650 --> 01:48.370 its value? 35 01:48.370 --> 01:55.840 So this will refer to the actual input itself, and we know we can access a property called value. 36 01:55.840 --> 01:57.550 So let's pass this to the function. 37 01:57.730 --> 02:03.760 And what this means is that now when we go and type our JavaScript again in script tags, and we define 38 02:03.760 --> 02:11.020 our function, which we called as showOutput, we can now access this value. 39 02:11.020 --> 02:14.410 And I'm just putting it in a variable called "val" for value. 40 02:14.860 --> 02:20.680 But remember what it is - that val is going to be the value of the input of type range. 41 02:20.680 --> 02:22.810 And now it's very, very simple. 42 02:22.810 --> 02:27.230 All we have to do is grab our output element, and insert the value into that. 43 02:27.350 --> 02:30.290 Oh ... we haven't got an output element have we? 44 02:30.320 --> 02:31.010 Silly me 🙈. 45 02:31.040 --> 02:36.380 Let's create an output element, and let's give it an ID of output. 46 02:36.380 --> 02:42.590 So now all we have to do is we have to grab that output, getElementByID(), and we gave it an ID of 47 02:42.590 --> 02:43.160 output. 48 02:43.190 --> 02:49.790 We want to change its textContent property and we want to assign that to the value of ... you've got it, 49 02:49.790 --> 02:51.290 the value itself. 50 02:52.010 --> 02:53.030 Let's see if this works. 51 02:53.030 --> 02:57.530 Let's go to the browser, let's refresh and let's start moving the slider. 52 02:57.530 --> 02:59.720 And there you go. 53 02:59.750 --> 03:01.970 How cool is this, my dear students? 54 03:02.180 --> 03:03.920 And I told you so. 55 03:03.950 --> 03:05.660 It's not that difficult, is it? 56 03:05.660 --> 03:11.300 And as I'm sure you can already be seeing, we deal with a lot of repetition 57 03:11.300 --> 03:17.060 as developers. We are always listening for certain events, like oninput. 58 03:17.060 --> 03:23.960 It's a very, very common event. And onclick events, focus events, blur events, etc etc. 59 03:23.960 --> 03:28.880 So once you become accustomed to working with these things, it becomes very easy, it becomes very 60 03:28.880 --> 03:30.770 fun and it becomes very intuitive. 61 03:30.800 --> 03:35.420 Yes, there's always nuances with every website and app that you'll create and there are things that are 62 03:35.420 --> 03:38.900 going to blow your mind and really get you scratching and pulling your hair out. 63 03:38.900 --> 03:43.850 But at the crux, at the core, if you've got a solid foundation, it really is going to make your life 64 03:43.850 --> 03:44.300 easier. 65 03:44.300 --> 03:47.300 So anyway, hope you're having a lot of fun, but let's get cracking. 66 03:47.300 --> 03:48.170 Let's move on.