All right.
What is this oninput event all about?
Well, firstly, what I want to do is I want to create a text control and I want us to calculate how
many characters the user has typed into that text control.
And I want to display that on the screen to the user.
Let's do that.
And in doing this, I want to show you what the oninput event is.
So the first step is, let's create a simple HTML document. And let's create a body. Inside this body
I want to create an input, and we want input with type text.
This is the default by the way.
You already know this, so we don't even have to define its type.
But I like defining its type.
I always think it's good because then you're being explicit. And I want to have a placeholder here just
so we can tell the user what we're doing.
Let's see what length you're typing in here.
And then I want the size of this input text field a little bit larger than the default.
So let's just say size is 40.
Let's look at what this looks like on the browser.
There we go.
Pretty straight, straightforward.
And of course, if the user starts typing in here, nothing happens.
But I want our JavaScript now to count how many characters have been entered into this control and I
want that displayed below.
How do we do that?
Well, firstly, we need some way to display the information, don't we?
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
of output because that's where we want our output text to be.
So there we go.
We are kind-of all set up for it.
The last thing we have to do is we have to write our JavaScript.
You know that in order to write JavaScript we have to wrap it within script tags.
This tells the browser, or tells the JavaScript engine, that JavaScript is now kicking in.
That's why we have to put it in script tags.
All right.
How do we do this?
We want to listen for the oninput event that's fired on the input element.
So the first thing is we have to grab our input element.
The second thing is we know we're going to have to display those results in that div, right, with
the ID of output.
So let's grab that div. Then,
I want to listen for the oninput event. And then when the oninput event is fired, we need to define
a function. And that function, all it's going to do, is it's going to take the value in that input control
and then we're going to access the length property.
We're going to count how many characters it has, and then we're going to display that in the output.
Very, very simple.
Let's get into it.
So as I mentioned, let's grab our elements.
That's the first step.
Let's define a variable called inputElement, because that's what we are getting.
We can access the document object. On here,
we've got the querySelector() - I'm just showing you different ways of doing things - and let's grab our input.
The next thing I want to grab is that div, right?
And let's just define that as our output area.
We're going to grab the document object, and here why don't we use getElementById(), because we gave
it an ID of output.
So there we go.
We've got our elements. Very, very simple.
The most important piece to the puzzle ðŸ§© is ... let's listen for the oninput event.
There are different ways of doing this.
I'm just going to access our input element.
And on here I'm going to say,
when the oninput
event is fired,
I want to execute a function.
And which function do we want to execute?
We can call it anything we want.
Let's just call it showOutput.
Okay, so we've defined what we want to listen for.
That "oninput" is not our keyword.
That's a keyword given to us by the browser.
So just remember that. When the oninput is fired, we are now going to execute a function called
showOutput.
So now the last thing we have to do is define the function, showOutput, because now nothing's going
to happen because we haven't defined the function.
In order to define a function in JavaScript, we have to use this function keyword and then we call
the function showOutput.
That's what we called it, right?
And then we've got to write all our code within these curly braces.
And I know I've mentioned this in previous lectures, but when an event is fired, we get access to
the event object and usually developers put this in a variable called "e", so that's what I'm going to
do.
So now we have access to this event object when it's fired. What do we want to happen?
Well, it's very simple.
We want to grab our output element, don't we?
And we want to change its textContent.
And now I'm just going to use Template Literals and Template Literals
allow us to easily write text and mix in variables.
You'll see what I mean.
Let's just say here within the Template Literals, the field's value is, and now we want to display the
length of text.
How do we do that?
Well, it's going to be in a variable.
And when you're using Template Literals, to include a variable, we have the dollar sign $ and we have
the curly braces {}.
And inside here we can access variables.
I want to first access our event object.
On our event object, we get access to another property called "target", and this target property gives
us the item that fired the event.
In our case, we know it's going to be that input. And on the input we've got a value property, which
is that whole string of text that the user typed, and that value property is also an object and it gives
us another property called length.
So there we go.
Now we've got the length of characters.
Right.
And there might only be one character
so let's just have that. And I think, my dear students, this should be all.
Let's now save this.
Let's go to our browser, and let's type Wally. How awesome is this?
The field's value is 5 characters long.
If I do backspace, it keeps reducing until there's nothing there.
How awesome.
Don't lose sight of what we've done.
All we've done is we've listened for the oninput event, and when that oninput event is fired, and it's
fired every time there's a modification to that input box,
we want it to execute a function called showOutput.
We then accessed the value property of that input, and on that we've got a length property.
And we just put out nice Template Literals to make it very easy for us to write this.
Hope it's making sense.
Hope you're having a lot of fun.
But now, I want to quickly hop to the lecture, and mention a few more things about the oninput event,
and then I'm going to test you, I want to give you a few different problems.
Anyway, so excited.
Let's hop back to the lecture.
So there you go.
You've seen the oninput, how it works
in a practical example. And I want to emphasize that the oninput event is not only relevant for the
output element. In fact, the oninput event occurs when the following elements are changed by a user,
the input, select and textarea elements.
And of course in the example we just saw, we saw it used with the input element.
The other thing I just want you to bear in mind with the oninput event, is that it is different to the onchange
event.
I know ðŸ™ˆ ... there's so many different events.
They're quite similar, but the onchange event is fired when the element loses focus. So it doesn't fire
immediately after a modification.
And that's why the oninput event was more useful in our example, because every time the user modifies
that input, we wanted to listen for that event, not necessarily when the user clicks out of the text
control.
And I think that's all I want to mention about this output element for now, although I do want to challenge
you to a few challenges.
So let's do those and then we'll move on.