具有更改功能的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/