HTML/Javascript 范围滑块 [英] HTML/Javascript range slider
本文介绍了HTML/Javascript 范围滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<头><script type = "text/javascript">$(初始化);函数初始化(){$('input[type="range"]').change(getTotal());}函数 getTotal(){var total = document.getElementById("outTotal");total.innerHTML = Number(slide.value) + Number(slide1.value0);}<身体><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>总计</label><output id = "outTotal"></output></html>
这是我现在所拥有的.我正在尝试将两个范围滑块相加并在更改时显示.我知道在 HTML 中我可以添加 onchange = "getTotal()"，但是有没有办法让 init() 函数一直运行.我无法弄清楚该函数中的代码有什么问题.
解决方案
这里我已经为你修复了.将此与您的代码进行比较并找出差异...
$(function(){$('input[type=range]').change(getTotal);//not () - 你没有调用函数getTotal();//最初调用它});函数 getTotal(){var total = document.getElementById("outTotal");var slide = document.getElementById("slide");var slide1 = document.getElementById("slide1");total.innerHTML = 1*(slide.value) + 1*(slide1.value);//这里你使用了幻灯片 slide1 而根本没有初始化它们}现场演示 http://jsfiddle.net/ox8gxk1h/
<!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.
解决方案
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/
这篇关于HTML/Javascript 范围滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
