HTML 5 output element

by Lien Z

HTML

<!--
    As you probably have guessed, the output element is used to display some sort of calculation. For example, if you’d like to display the coordinates of a mouse position, or the sum of a series of numbers, this data should be inserted into the output element.
As a simple example, let’s insert the sum of two numbers into an empty output with JavaScript, when a submit button is pressed.
-->

<form action="" method="get">  
    <p>  
        10 + 5 = <output name="sum"></output>  
    </p>  
    <button type="submit"> Calculate </button>  
</form>

JavaScript

(function() {  
    var f = document.forms[0];  
  
    if ( typeof f['sum'] !== 'undefined' ) {  
        f.addEventListener('submit', function(e) {  
            f['sum'].value = 15;  
            e.preventDefault();  
        }, false);  
    }  
    else { alert('Your browser is not ready yet.'); }  
})();