HTML/Javascript range slider -
HTML/Javascript range slider -
<!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 have now. i'm trying total 2 range sliders , display when changed. know in html can add together onchange = "gettotal()"
, there way have init()
function running time. can't figure out whats wrong code in function.
here i've fixed you. compare code , spot differences...
$(function(){ $('input[type=range]').change(gettotal); // not () - you're not calling function gettotal(); // initialy phone call }); 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 used slide slide1 without initializing them @ }
live demo http://jsfiddle.net/ox8gxk1h/
javascript html range
Comments
Post a Comment