I want to now talk about a very useful element when it comes to dealing with forms, and that is the
output element.
Okay, so what is this output element all about?
Well, it is semantically the correct element to display results.
For example, the results of a calculation from form ðŸ“° elements.
And where does it come from?
Who gives us this output element?
Well, it inherits from the HTMLOutputElement interface.
(sound effect: What did you say?)
And I don't want you to feel overwhelmed or confused.
Just think about it like this.
Someone has to give us elements to work with. That "someone" in our case is the browser.
The browsers have to conform to certain specifications and browsers give us access to a lot of interfaces,
and one of these interfaces that the browser gives us is the HTMLOutputElement.
And it's just useful because the browser has attached many properties and methods for manipulating the
layout and presentation of certain data that's shown in the output element.
And this is all done because we have this HTMLOutputElement interface. But ... words are just words.
Let me just quickly jump over to the console and I'll prove this to you.
Very quickly, let me prove to you where this output element comes from.
So here we are.
I'm just in a browser.
Let's just go to the console.
By the way, the console is a way for us to write JavaScript code.
It's basically the browser's interface for executing JavaScript.
That's all the console is, I'm sure,
I'm sure you probably knew that.
Okay.
So all I want to do is I want to quickly create our output element.
So let's just define it as output.
And then I want to access the document object, which the DOM gives us. On here,
there is a method called createElement().
And the element we want to create is this output element.
So now we've created this output element.
All I want to do now is I want to console log it out to the screen, but I don't want to use console
log because console log gives us the actual HTML.
Well, let me show you.
If I go console log and I just console log our output, we get the actual HTML representation, we get
our output tag.
But that's not what I want.
I want to see the JSON-tree kind of representational format of this output element, aka, I want to
see all the properties and methods of this element.
And in order to do that I want to use console
dir.
And I want to dir() out our output variable.
Okay, there we go.
And if we open this up, what's really cool and I encourage you to do this, go through and start seeing
all the properties and methods that we have on this output element.
But what I really want to look at is the __proto__. And if you scroll all the way down,
you know, here are some properties, innerHTML and innerText ...
that's why we can access all of these properties and change values.
This is where they come from. How cool.
And if we scroll all the way down to the bottom, oh, look here ... haha, I keep stopping hey ...
Anyway, so interesting, you know, and here are some cool things. We've got
remember the events that we listened for in some of our previous examples?
Well, here is the onblur event, onclick event.
Very cool.
Anyway, let's scroll to the bottom for real this time.
And you'll see here at the very bottom, we've got this __proto__.
And don't worry what photo is.
Just realize when it comes to JavaScript, it's an inheritance based model, meaning properties and
methods and objects inherit from other properties or other objects.
And here this output element inherits from the HTMLOutputElement.
Proof is in the pudding, and you can see it right here.
"Okay, Clyde, I know it comes from the HTMLOutputEelement interface, but what really else can you
tell me about this output element?
What's some juicy information about it?"
Well, firstly, it does not have the value attribute.
Remember we were talking about the textarea element and remember that the textarea also does not have
the value attribute.
Why doesn't it have the attribute?
Well, very similarly to the textarea, it's because there's an opening and closing tag with this element.
So therefore the text node between the opening and closing tags pretty much make up the value.
So if you ever want a default value, you just put it in between the opening and closing tags.
That's why there is no value attribute.
The other thing that you need to bear in mind with the output element, is remember the first point on
the screen, it's a semantic element.
It's only used to display results and this means it does not submit any name:value pairs or content
to the server.
So just remember, my dear students, for the most part, this output element is only there for simple
semantic display purposes
for a user.
There's something else now very important when it comes to the output element, and that is the oninput
event.
What! Before I even talk about the oninput event, let me show you how it works in action.