(music)
Okay, so here we are.
This is where we left off.
We've got this range, but we can't see what the user, you know, what the range is.
We can't see the value.
And it's irritating because you can only see it when it's submitted to the server.
So how do we create an output element and display it, or display the value, to the screen?
Well, like I mentioned, we can use an output element. So let me show you how we can do that.
The first thing we need to do is we need to use JavaScript and in order to do that, we have to put
JavaScript within the script tags.
Now what we have to do, is we have to do a few things.
Firstly, we want to get the price value right.
So in order to do that, we need to grab that input of type range.
So how do we do that?
Well, we can just define a variable called price, and we can get that input with the querySelector.
So we access the document. On here,
we've got a method called querySelector(), and you guessed it, we want to target that element that
has an ID of price.
Very, very simple.
The next thing I want to do is I want to create an output element.
So within our HTML, you know what ...
let's just remove the button for now. Output, and I want to give it a class.
Let's give it a class of, I don't know, let's say price-output, because that's exactly what
it is.
Now, the second step in JavaScript is to grab that output.
So again, let's define a variable called output, and let's get it again with the querySelector,
querySelector, and this time we want to query select the element that has a class of price-output.
But if we leave it at this, nothing visually has happened.
If we go to the browser and we refresh, nothing has happened.
So let's set a default ... set default ...
value to the output element, right?
Because right now we can see the output element has nothing within its tags.
It's empty.
And in order to do this, all we have to do is grab our output variable we defined in JavaScript above
and we can set its textContent property to what?
That's right.
To the value of the input.
And we know we have the input or the price input in that price variable we've defined in JavaScript.
And on there we've got the value property, right?
And initially we set that to 250,000.
If we save this, and we go back to the browser, we should see it.
There we go.
But obviously now what happens is when we move
nothing happens, okay?
And we want that to be dynamic.
We want it to constantly change.
What I didn't mention in the lecture was that every time a change occurs on this range, the input event
gets fired by the browser.
So what we have to do in JavaScript is we have to listen for that input event and every time that input
event is triggered, we want to effectively update that output element's value.
So let's quickly, quickly do that and then we'll be done.
All we have to do is go back to our coding editor. And as I mentioned, on that input of price, we have
to add an event listener and the event we're listening for here is input, right?
And I'll just use arrow syntax
to define our callback function.
What happens when this input event is fired?
Very, very easy.
All we want to do, is we want to grab our output element we defined above in JavaScript.
We want to change its textContent
property to what?
That's right.
We want to assign the value of that input of type range, right.
So we can grab our price variable and it has a property of value.
That's all we want to do.
And this, my dear student, should be enough.
Let's go back here, refresh and as we slide
the range control
we can see the numbers moving.
How awesome is this?
That is so, so cool.
Much, much better.
Much more user friendly for the user to see the numbers as they slide it along.
So there you go.
That's the code.
Very, very simple
JavaScript.
Nothing, nothing crazy going on here and I can't wait to continue on to the next lecture.
See you now.