This is yet another fun, fun example.
And I wanted to specifically show you this example because as I said, we can use the oninput event with
different types of inputs.
And here we're using the range.
So let's set it up. Very, very simple.
We've got an HTML body. In the body
let's just have a paragraph.
This is a cool example
showing you how to dynamically update the output element by listening for the oninput event.
So there is our paragraph - very, very simple.
What's next?
Very, very simple.
Let's create our input and this time it's with type of range.
We don't even need a name or an ID.
It's going to be that simple of an example.
So there we go.
But we're not done, are we?
Let's go to the browser and see what this looks like.
Let me zoom out a bit.
We're not done.
You can see we've got our range slider, but firstly it never displays values to the user automatically.
That's one of the downsides with this range type. And we want to show it dynamically.
So what do we do?
Well, we need to listen for that event.
We can also listen for it inline, by listening for the ... not online, sorry oninput event.
And then when the oninput event is fired on this input element, we can either write our JavaScript
directly in here.
I don't want to do that.
I just want to show you another way of doing something.
We can execute a function. And let's just call it showOutput.
In order to execute a function, you need to follow it by parentheses.
That's just a nuance when it comes to JavaScript.
The other cool thing when we go and execute a function is we can pass the function, something. We can
say, hey, when you execute it, pass something on to the function and here why don't we just pass
its value?
So this will refer to the actual input itself, and we know we can access a property called value.
So let's pass this to the function.
And what this means is that now when we go and type our JavaScript again in script tags, and we define
our function, which we called as showOutput, we can now access this value.
And I'm just putting it in a variable called "val" for value.
But remember what it is - that val is going to be the value of the input of type range.
And now it's very, very simple.
All we have to do is grab our output element, and insert the value into that.
Oh ... we haven't got an output element have we?
Silly me ðŸ™ˆ.
Let's create an output element, and let's give it an ID of output.
So now all we have to do is we have to grab that output, getElementByID(), and we gave it an ID of
output.
We want to change its textContent property and we want to assign that to the value of ... you've got it,
the value itself.
Let's see if this works.
Let's go to the browser, let's refresh and let's start moving the slider.
And there you go.
How cool is this, my dear students?
And I told you so.
It's not that difficult, is it?
And as I'm sure you can already be seeing, we deal with a lot of repetition
as developers. We are always listening for certain events, like oninput.
It's a very, very common event. And onclick events, focus events, blur events, etc etc.
So once you become accustomed to working with these things, it becomes very easy, it becomes very
fun and it becomes very intuitive.
Yes, there's always nuances with every website and app that you'll create and there are things that are
going to blow your mind and really get you scratching and pulling your hair out.
But at the crux, at the core, if you've got a solid foundation, it really is going to make your life
easier.
So anyway, hope you're having a lot of fun, but let's get cracking.
Let's move on.