Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We have a little div for our results, and it just has these result fields in it. And you'll notice that it has an output element for each of these results. So let's go ahead and load this in a browser. I'll open this with Firefox, and we have our couple of little number fields here. And I'm just going to put in a number, and you'll notice that it's immediately starting to calculate. And as I type, it's calculating. And this is because we're using this oninput event here in the form.
Now, it's worth noting at this point that oninput, as well as the output element, are not supported yet in the current versions of Microsoft Internet Explorer, which is IE9 and before. It is implemented in IE10, so if you have IE10 by the time you're seeing this, it ought to work. It's currently implemented in all the other browsers that I have tested, and it's this oninput event that allows us to just type and have the results immediately show up.
And so it's calling calc, and calc is this little function here. Very simple. It simply gets the value of a and b and it does a little math for sum, product, diff, quotient, and remainder. And it loads the values of those, and those are these output elements, so you have ids sum, diff, product, quotient, and remainder. The for attribute associates it with these other IDs--a and b--so that the browser knows that these are associated.
Now when I look at how this is implemented, there is a lot of things about it that don't quite make sense to me. So either it will continue to morph and evolve and change as it gets implemented or it won't. For one thing, I found that it's not restricted to numeric output, and yet the spec says that it is used for the output of calculations. And I'm not really seeing the value of this for attribute. It doesn't seem to do anything, at least not in the ways that I've seen it demonstrated on the Internet and I haven't seen a lot of demonstrations of it.
So this is a new element. The implementations I've seen don't really limit it to numeric output. It looks like it could be convenient for a lot of different uses, but I hate to recommend that as we really don't know what the browsers are going to do with it. At this point, I'm considering it semantically tied to the results of calculations, but we'll see where it goes in the future.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98069 Viewers
61 Video lessons · 85308 Viewers
71 Video lessons · 69354 Viewers
56 Video lessons · 101717 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.