onchange 함수가있는 HTML5 슬라이더

Question

값을 변경할 때 함수를 실행해야하는 슬라이더 (입력 유형 범위)가 있습니다. 그런 다음 함수는 별도의 div 컨테이너에 새 값을 표시해야합니다. 함수에 경고를 배치 한 후, 나는 함수가 호출되고 있지 않다는 것을 알지만, 한 시간 동안 인터넷 검색을하고 몇 가지 다른 메소드를 시도한 후에는 오류를 찾을 수 없다.

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

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

자바 스크립트 : 사전에

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

감사

다음은 HTML 부분입니다!

Answer 1

제대로 작동하면 요소가 렌더링 될 때 javascript 함수가 정의되어 있는지 확인해야합니다 (f.ex.

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

그리고 다음 자바 스크립트에 리스너를 추가 :

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

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

http://jsfiddle.net/Mmgxg/

이 더 좋은 방법은 인라인 onchange 속성을 제거하는 것입니다 :

<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/PPBUJ/