12

値が変更されたときに関数を実行することになっているスライダー（入力タイプの範囲）があります。次に、関数は新しい値を別のdivコンテナに表示する必要があります。関数にアラートを配置した後、関数が呼び出されていないことがわかりましたが、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;
}
4

1 に答える 1

24

これは機能します。要素がレンダリングされるときにJavaScript関数が定義されていることを確認する必要があります。次に例を示します。

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

このデモを参照してください：https ：//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;
}

https://jsfiddle.net/PPBUJ/

于 2012-12-15T22:23:10.290 に答える