web-dev-qa-db-ja.com

onchange機能を備えたHTML5スライダー

値が変更されたときに関数を実行することになっているスライダー（入力タイプの範囲）があります。次に、関数は新しい値を別のdiv-containerに表示する必要があります。関数にアラートを配置した後、関数が呼び出されていないことがわかりましたが、1時間グーグルしていくつかの異なる方法を試した後、エラーを見つけることができません。

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;
}

前もって感謝します！

javascripthtmlslider
6
Necroteuch

それは機能します。要素がレンダリングされるときに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/

18
David Hellsing