HTML/Javascript range slider

user3562657

<!DOCTYPE html>
<html>
<head>
    <script type = "text/javascript">
        $(init);

        function init(){
            $('input[type="range"]').change(getTotal());        
        }

        function getTotal(){
            var total = document.getElementById("outTotal");
            total.innerHTML = Number(slide.value) + Number(slide1.value0);
        }        

    </script>
</head>
<body>
    <input id="slide" type="range" min="1" max="100" step="1" value="10" >
    <input id="slide1" type="range" min=1 max=100 step=1 value=10 >    

    <div>
        <label>Total</label>
        <output id = "outTotal"></output>
    </div>
</body>
</html>

Here's what I have now. I'm trying to total the two range sliders and display when they are changed. I know in the HTML I can add onchange = "getTotal()", but is there a way to have the init() function running all the time. I can't figure out whats wrong with the code in that function.

MightyPork

Here I've fixed it for you. Compare this with your code and spot the differences...

$(function(){
    $('input[type=range]').change(getTotal); // not () - you're not calling the function
    getTotal(); // initialy call it
});

function getTotal(){
    var total = document.getElementById("outTotal");
    var slide = document.getElementById("slide");
    var slide1 = document.getElementById("slide1");
    total.innerHTML = 1*(slide.value) + 1*(slide1.value); // here you used the slide slide1 without initializing them at all
}

Live demo http://jsfiddle.net/ox8gxk1h/

Collected from the Internet

Please contact [email protected] to delete if infringement.