WEBVTT 0 00:00.530 --> 00:01.160 All right. 1 00:01.160 --> 00:04.510 What is this oninput event all about? 2 00:04.520 --> 00:11.300 Well, firstly, what I want to do is I want to create a text control and I want us to calculate how 3 00:11.300 --> 00:15.290 many characters the user has typed into that text control. 4 00:15.410 --> 00:18.500 And I want to display that on the screen to the user. 5 00:18.500 --> 00:19.460 Let's do that. 6 00:19.460 --> 00:24.350 And in doing this, I want to show you what the oninput event is. 7 00:24.350 --> 00:33.200 So the first step is, let's create a simple HTML document. And let's create a body. Inside this body 8 00:33.200 --> 00:36.920 I want to create an input, and we want input with type text. 9 00:37.100 --> 00:38.990 This is the default by the way. 10 00:38.990 --> 00:42.620 You already know this, so we don't even have to define its type. 11 00:42.620 --> 00:44.180 But I like defining its type. 12 00:44.180 --> 00:49.010 I always think it's good because then you're being explicit. And I want to have a placeholder here just 13 00:49.010 --> 00:50.870 so we can tell the user what we're doing. 14 00:50.870 --> 00:56.540 Let's see what length you're typing in here. 15 00:56.810 --> 01:01.020 And then I want the size of this input text field a little bit larger than the default. 16 01:01.020 --> 01:03.390 So let's just say size is 40. 17 01:03.570 --> 01:06.270 Let's look at what this looks like on the browser. 18 01:07.050 --> 01:07.620 There we go. 19 01:07.620 --> 01:08.430 Pretty straight, straightforward. 20 01:08.430 --> 01:11.670 And of course, if the user starts typing in here, nothing happens. 21 01:11.670 --> 01:16.830 But I want our JavaScript now to count how many characters have been entered into this control and I 22 01:16.830 --> 01:18.990 want that displayed below. 23 01:19.350 --> 01:20.370 How do we do that? 24 01:20.400 --> 01:23.640 Well, firstly, we need some way to display the information, don't we? 25 01:23.640 --> 01:29.490 So let's just have a few breaks here and then let's create an empty div tag, and let's give it an ID 26 01:29.490 --> 01:33.030 of output because that's where we want our output text to be. 27 01:34.000 --> 01:34.600 So there we go. 28 01:34.600 --> 01:35.860 We are kind-of all set up for it. 29 01:35.890 --> 01:38.740 The last thing we have to do is we have to write our JavaScript. 30 01:38.740 --> 01:43.300 You know that in order to write JavaScript we have to wrap it within script tags. 31 01:43.330 --> 01:48.940 This tells the browser, or tells the JavaScript engine, that JavaScript is now kicking in. 32 01:48.970 --> 01:51.100 That's why we have to put it in script tags. 33 01:51.340 --> 01:52.240 All right. 34 01:52.270 --> 01:53.410 How do we do this? 35 01:53.440 --> 01:59.020 We want to listen for the oninput event that's fired on the input element. 36 01:59.020 --> 02:01.630 So the first thing is we have to grab our input element. 37 02:02.260 --> 02:06.910 The second thing is we know we're going to have to display those results in that div, right, with 38 02:06.910 --> 02:07.600 the ID of output. 39 02:07.600 --> 02:10.060 So let's grab that div. Then, 40 02:10.150 --> 02:15.820 I want to listen for the oninput event. And then when the oninput event is fired, we need to define 41 02:15.820 --> 02:22.240 a function. And that function, all it's going to do, is it's going to take the value in that input control 42 02:22.450 --> 02:24.490 and then we're going to access the length property. 43 02:24.490 --> 02:28.600 We're going to count how many characters it has, and then we're going to display that in the output. 44 02:28.600 --> 02:29.590 Very, very simple. 45 02:29.590 --> 02:30.670 Let's get into it. 46 02:31.060 --> 02:35.050 So as I mentioned, let's grab our elements. 47 02:35.050 --> 02:36.190 That's the first step. 48 02:36.550 --> 02:41.170 Let's define a variable called inputElement, because that's what we are getting. 49 02:41.170 --> 02:43.420 We can access the document object. On here, 50 02:43.420 --> 02:48.250 we've got the querySelector() - I'm just showing you different ways of doing things - and let's grab our input. 51 02:48.280 --> 02:50.530 The next thing I want to grab is that div, right? 52 02:50.530 --> 02:53.470 And let's just define that as our output area. 53 02:53.590 --> 02:58.750 We're going to grab the document object, and here why don't we use getElementById(), because we gave 54 02:58.750 --> 02:59.890 it an ID of output. 55 02:59.890 --> 03:00.490 So there we go. 56 03:00.490 --> 03:03.020 We've got our elements. Very, very simple. 57 03:03.020 --> 03:09.350 The most important piece to the puzzle 🧩 is ... let's listen for the oninput event. 58 03:09.380 --> 03:11.030 There are different ways of doing this. 59 03:11.030 --> 03:13.280 I'm just going to access our input element. 60 03:13.280 --> 03:15.830 And on here I'm going to say, 61 03:16.770 --> 03:18.600 when the oninput 62 03:19.410 --> 03:20.580 event is fired, 63 03:20.730 --> 03:22.320 I want to execute a function. 64 03:22.320 --> 03:24.900 And which function do we want to execute? 65 03:24.930 --> 03:26.850 We can call it anything we want. 66 03:26.880 --> 03:29.430 Let's just call it showOutput. 67 03:30.000 --> 03:33.270 Okay, so we've defined what we want to listen for. 68 03:33.300 --> 03:35.550 That "oninput" is not our keyword. 69 03:35.550 --> 03:38.430 That's a keyword given to us by the browser. 70 03:38.640 --> 03:46.020 So just remember that. When the oninput is fired, we are now going to execute a function called 71 03:46.020 --> 03:46.590 showOutput. 72 03:46.620 --> 03:52.170 So now the last thing we have to do is define the function, showOutput, because now nothing's going 73 03:52.170 --> 03:54.030 to happen because we haven't defined the function. 74 03:54.480 --> 04:00.660 In order to define a function in JavaScript, we have to use this function keyword and then we call 75 04:00.660 --> 04:02.280 the function showOutput. 76 04:02.280 --> 04:03.900 That's what we called it, right? 77 04:03.900 --> 04:08.550 And then we've got to write all our code within these curly braces. 78 04:08.550 --> 04:14.700 And I know I've mentioned this in previous lectures, but when an event is fired, we get access to 79 04:14.700 --> 04:20.950 the event object and usually developers put this in a variable called "e", so that's what I'm going to 80 04:20.950 --> 04:21.420 do. 81 04:21.430 --> 04:28.410 So now we have access to this event object when it's fired. What do we want to happen? 82 04:28.420 --> 04:29.410 Well, it's very simple. 83 04:29.410 --> 04:31.720 We want to grab our output element, don't we? 84 04:31.720 --> 04:34.780 And we want to change its textContent. 85 04:35.080 --> 04:38.590 And now I'm just going to use Template Literals and Template Literals 86 04:38.620 --> 04:42.580 allow us to easily write text and mix in variables. 87 04:42.580 --> 04:43.410 You'll see what I mean. 88 04:43.420 --> 04:51.610 Let's just say here within the Template Literals, the field's value is, and now we want to display the 89 04:51.610 --> 04:53.080 length of text. 90 04:53.110 --> 04:53.770 How do we do that? 91 04:53.770 --> 04:55.030 Well, it's going to be in a variable. 92 04:55.030 --> 05:00.370 And when you're using Template Literals, to include a variable, we have the dollar sign $ and we have 93 05:00.370 --> 05:01.750 the curly braces {}. 94 05:01.750 --> 05:04.390 And inside here we can access variables. 95 05:04.390 --> 05:07.120 I want to first access our event object. 96 05:07.120 --> 05:15.220 On our event object, we get access to another property called "target", and this target property gives 97 05:15.220 --> 05:17.620 us the item that fired the event. 98 05:17.620 --> 05:24.220 In our case, we know it's going to be that input. And on the input we've got a value property, which 99 05:24.220 --> 05:30.880 is that whole string of text that the user typed, and that value property is also an object and it gives 100 05:30.880 --> 05:33.610 us another property called length. 101 05:34.060 --> 05:34.930 So there we go. 102 05:34.930 --> 05:37.750 Now we've got the length of characters. 103 05:38.650 --> 05:39.130 Right. 104 05:40.270 --> 05:41.950 And there might only be one character 105 05:41.950 --> 05:47.080 so let's just have that. And I think, my dear students, this should be all. 106 05:47.110 --> 05:48.960 Let's now save this. 107 05:48.970 --> 05:55.000 Let's go to our browser, and let's type Wally. How awesome is this? 108 05:55.120 --> 05:57.790 The field's value is 5 characters long. 109 05:58.750 --> 06:03.010 If I do backspace, it keeps reducing until there's nothing there. 110 06:03.310 --> 06:04.840 How awesome. 111 06:04.870 --> 06:07.600 Don't lose sight of what we've done. 112 06:07.870 --> 06:15.070 All we've done is we've listened for the oninput event, and when that oninput event is fired, and it's 113 06:15.070 --> 06:17.900 fired every time there's a modification to that input box, 114 06:17.920 --> 06:21.190 we want it to execute a function called showOutput. 115 06:21.220 --> 06:26.680 We then accessed the value property of that input, and on that we've got a length property. 116 06:27.540 --> 06:32.350 And we just put out nice Template Literals to make it very easy for us to write this. 117 06:32.370 --> 06:33.420 Hope it's making sense. 118 06:33.420 --> 06:34.380 Hope you're having a lot of fun. 119 06:34.380 --> 06:39.720 But now, I want to quickly hop to the lecture, and mention a few more things about the oninput event, 120 06:39.720 --> 06:43.230 and then I'm going to test you, I want to give you a few different problems. 121 06:43.230 --> 06:44.370 Anyway, so excited. 122 06:44.370 --> 06:45.930 Let's hop back to the lecture. 123 06:46.020 --> 06:46.830 So there you go. 124 06:46.830 --> 06:48.990 You've seen the oninput, how it works 125 06:48.990 --> 06:55.020 in a practical example. And I want to emphasize that the oninput event is not only relevant for the 126 06:55.020 --> 07:01.500 output element. In fact, the oninput event occurs when the following elements are changed by a user, 127 07:01.530 --> 07:05.220 the input, select and textarea elements. 128 07:05.580 --> 07:10.170 And of course in the example we just saw, we saw it used with the input element. 129 07:10.200 --> 07:15.000 The other thing I just want you to bear in mind with the oninput event, is that it is different to the onchange 130 07:15.000 --> 07:15.570 event. 131 07:15.570 --> 07:17.820 I know 🙈 ... there's so many different events. 132 07:17.820 --> 07:25.050 They're quite similar, but the onchange event is fired when the element loses focus. So it doesn't fire 133 07:25.050 --> 07:27.310 immediately after a modification. 134 07:27.310 --> 07:32.920 And that's why the oninput event was more useful in our example, because every time the user modifies 135 07:32.920 --> 07:38.530 that input, we wanted to listen for that event, not necessarily when the user clicks out of the text 136 07:38.530 --> 07:39.190 control. 137 07:39.190 --> 07:44.620 And I think that's all I want to mention about this output element for now, although I do want to challenge 138 07:44.620 --> 07:47.350 you to a few challenges. 139 07:47.680 --> 07:49.780 So let's do those and then we'll move on.