output要素

<form name="test01">

<input type="number" name="a"> + <input type="number" name="b"> = <output name="result" for="a b"></output>

</form>



<script>

(function () {

    'use strict';



    var form = document.test01;



    form.addEventListener('keyup', function () {

        form.result.value = Number(form.a.value) + Number(form.b.value);

    });



    form.addEventListener('submit', function (e) {

        e.preventDefault();

    });

}());



</script>

<form name="test02">

<input type="range" min="0" max="10" step="1" name="a"> <output name="result" for="a"></output>

</form>



<script>

(function () {

    'use strict';



    var range = document.test02.a;

    var change = function () {

        document.test02.result.value = this.value;

    };



    range.addEventListener('change', change);

    range.addEventListener('mousedown', function () {

        range.addEventListener('mousemove', change);

        window.addEventListener('mouseup', function () {

            window.removeEventListener('mousemove', change);

            range.removeEventListener('mousemove', change);

        });

    });

}());



</script>