具有onchange功能的HTML5 Slider

Question

我有一个滑块(输入类型范围),它应该在更改值时运行一个函数.然后,该函数应在单独的div容器中显示新值.在函数中发出警报后,我知道该函数没有被调用,但是在谷歌搜索了一个小时并尝试了几种不同的方法之后我就找不到错误了.

这是HTML部分:

<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">

<div id="sliderAmount"></div>

使用Javascript:

//Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}

提前致谢!

Answer 1

它工作正常,你只需要确保在渲染元素时定义了javascript函数,f.ex.

<script>
    function updateSlider(slideAmount) {
        var sliderDiv = document.getElementById("sliderAmount");
        sliderDiv.innerHTML = slideAmount;
    }
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>?

看到这个演示:http://jsfiddle.net/Mmgxg/

更好的方法是删除内联onchange属性:

<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>

然后在你的javascript中添加监听器:

var slide = document.getElementById('slide'),
    sliderDiv = document.getElementById("sliderAmount");

slide.onchange = function() {
    sliderDiv.innerHTML = this.value;
}?

http://jsfiddle.net/PPBUJ/