Javascript DOM Input event

Description

Javascript DOM Input event

View in separate window 

<!DOCTYPE html> 

<html lang="en"> 
<body> 
    <form id="form1" name="form1"> 
        <p> 
            <label for="minValue">Min: </label> 
            <input type="number" id="minValue" name="minValue" /> 
        </p> 
        <p> 
            <label for="maxValue">Max: </label> 
            <input type="number" id="maxValue" name="maxValue" /> 
        </p> 
        <p> 
            <label for="stepValue">Step: </label> 
            <input type="number" id="stepValue" name="stepValue" /> 
        </p> 
        <p> 
            <input type="range" id="slider" name="slider" /> 
        </p> 
    </form> 
    <output id="result" name="result" form="form1" for="slider"> 
</output> /*  ww w  .  ja v a  2 s . co m*/

    <script> 
        let myForm = document.form1; 
        let output = myForm.result; 

        function formInputChange() { 
            let slider = myForm.slider; 

            slider.min = parseFloat(myForm.minValue.value); 
            slider.max = parseFloat(myForm.maxValue.value); 
            slider.step = parseFloat(myForm.stepValue.value); 

            result.value = slider.value; 
        } 
        myForm.addEventListener("input", formInputChange); 
    </script> 
</body> 
</html>



PreviousNext

Related