<output>: The HTML Output Element

I. Description

The HTML <output> element is used to hold the results of a calculation, or the results of a user action.

II. Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Output Example Page</title>
        <script>
            window.onload = function() {
                start();
            }
            function start() {
                let compute_sum_form = document.getElementById("compute_sum");
                function handleForm(event) {
                    event.preventDefault();
                }
                compute_sum_form.addEventListener('submit', handleForm);
            }

            function calculate_sum() {
                // Get the input elements
                let value_1_element = document.getElementById("value_1");
                let value_2_element = document.getElementById("value_2");

                // Get the output elements
                let output_element = document.getElementById("output");

                // Convert string values into integer values
                let value_1 = parseInt(value_1_element.value);
                let value_2 = parseInt(value_2_element.value);

                // Compute the result and assign it to the output element
                output_element.value = value_1 + value_2;
            }
        </script>
    </head>
    <body>
        <h1>Compute The Sum Of Two Integers</h1>
        <form id="compute_sum">
            <label for="value_1">Value 1</label>
            <input id="value_1" type="number" name="value_1" placeholder="Value 1" required/>
            <label for="value_2">Value 2</label>
            <input id="value_2" type="number" name="value_2" placeholder="Value 2" required/>
            <button onclick="calculate_sum();">Calculate Sum</button>
            <h2>Result</h2>
            <p>
                The sum of Value 1, and Value 2 is:
                <output id="output" for="value_1 value_2" form="compute_sum"></output>
            </p>
        </form>
    </body>
</html>

This document was last updated: