Did you give it a go?
It's actually quite a tricky one because as I mentioned, we're going to be using the name attribute
to execute an inline event listener.
I know sounds like a lot of big words, but it really is quite simple.
Let's set up our HTML document.
In here we can have a head and then a style section.
And for now, let's just leave it blank.
Let's first write up our HTML, and then we can have a body. Right in our body,
let's create a heading tag called output ... "Output Element in Action".
Here, I want to create a form.
We don't need an action because we're not submitting this to a server.
And I want, let's say two inputs
with type numbers, right, because we are multiplying one number by another.
So the input needs to be of type number. It won't make sense to have characters.
Let's give it a name of `num1`.
This is the first number the user is going to type.
And then I want exactly the same thing, type of number
but name can be `num2`.
We don't need an ID once again.
So there we go.
That's our first number,
we know then that's going to be multiplied by the second number.
And this is going to be equal to the answer.
And the answer we want needs to be inserted in what?
That's right.
We are dealing with the output element.
So we want the answer displayed in an output element.
So let's create an output element.
And again, in order to identify this output in our event listener, our inline event listener, we need to
give it a name attribute.
And the name attribute we can give
it can be anything.
Let's just call it outputElement
for lack of a better word.
We can start off with 0. But obviously the textContent or the innerHTML is going to be changed dynamically.
So let's look at what this looks like in the browser.
Hey how cool, how cool ðŸ˜Ž.
You know what?
We don't even need to style this.
I think this is fine.
You know, right now, obviously the numbers do nothing.
Um, because we haven't defined any JavaScript.
We've just set this output element static at 0.
How do we make it dynamic?
Well, like I said in the introduction, let's create an inline event listener.
I know it's not the best way to do things.
If you've seen my DOM courses, I don't really like using inline event listeners,
it's much better to do it externally, for example via the addEventListener() method.
But anyway, it'll do
for now.
I don't want to include <script> tags and create too much confusion.
So what we can do when we listen for the `oninput` event is we can execute it directly inline, and we
can listen for it just like this,
we can include it as an attribute `oninput`.
It is really this simple.
So now every time this oninput event is fired, we can now define JavaScript inline in order for the
parser to execute.
So, we want to now get the output element don't we?
And we've defined its name as outputElement.
Can you see it.
So, let's access the outputElement.
We want to change what?
That's right,
we want to change the textContent.
And what do we want to assign that to?
We want to assign it to literally the number one value, times the number two value. It really is that simple.
So it's going to be number-one times [multiplied by] number-two.
We've given the first input the name of num1.
And we know to access the value of any form control that we have to access the `value` property.
And that's all there is to it
my dear students ... num2, we do the same thing,
we grab its value property.
It really cannot get more easier than this.
If we go to our browser, let's multiply, I don't know, 5 by 5.
(sound: yeah).
How awesome is this? Man,
I have a lot of fun.
And of course you know it's dynamic.
You can you can multiply whatever you want.
Very very cool.
So this is just a very quick example of us using the `oninput` event,
and whenever that event is fired, we display the results in an output element.
I hope it's becoming more intuitive.
I hope you're having a lot of fun and I'll see you in the next lecture.