具有更改功能的HTML5滑块

Question

我有一个滑块（输入类型范围），应该在更改值时运行函数。该函数应该在独立的div容器中显示新的值。在函数中放置一个警告之后，我知道这个函数没有被调用，但是在google搜索了一个小时并尝试了几种不同的方法之后，我找不到这个错误。

这里的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/