19

範囲スライダーを機能させようとしていますが、できません。ユーザーが値を選択したときにコードがその値を読み取るように、イベント ハンドラーを追加するにはどうすればよいですか。現在、その値は常に1です。

純粋なJavascriptを使用してこれを行いたいと思います。

HTML:

<div id="slider">
    <input class="bar" type="range" id="rangeinput" min="1" max="25" value="1" onchange="rangevalue.value=value"/>
    <span class="highlight"></span>
    <output id="rangevalue">1</output>
</div>

ジャバスクリプト:

var rangeInput = document.getElementById("rangeinput").value;
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    if (rangeInput > 0 && rangeInput < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

JSFIDDLE

4

5 に答える 5

16

シングルリード

問題は、イベントが発生するたびに値を読み取るのではなく、(起動時に) 1 回だけ値を読み取ることです。

// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;

代わりにハンドラーで値を読み取る必要があります。

function testtest(e) {
    // read the value from the slider:
    var value = document.getElementById("rangeinput").value;
    // now compare:
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

または、コードを書き直すには:

var rangeInput = document.getElementById("rangeinput");
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    var value = rangeInput.value;
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

範囲値を更新しています

出力要素を範囲の値で更新したいようにも見えます。現在行っていることは、要素を id で参照することです。

onchange="rangevalue.value=value"

ただし、私の知る限り、これは標準的な動作ではありません。ID だけで要素を参照することはできません。要素を取得してから、DOM を介して値を設定する必要があります。

JavaScript を使用して変更リスナーを追加することをお勧めします。

rangeInput.addEventListener("change", function() {
    document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);

もちろん、使用するコードを更新するaddEventListenerかattachEvent、サポートするブラウザーに応じてコードを更新する必要があります。ここで、JQueryが本当に役に立ちます。

于 2013-10-28T00:59:19.583 に答える
6

mouseupそのためにイベントを使用します。

var rangeInput = document.getElementById("rangeinput");

rangeInput.addEventListener('mouseup', function() {
    if (this.value > 0 && this.value < 5) {
        alert("First");
    } else{
        alert("Second");
    }
});

デモ: http://jsfiddle.net/ZnYjY/1

于 2013-10-28T00:18:59.927 に答える
2

oninputFORMsメソッドを使用することもできます。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" />100 +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

onclick/onmouseupこれは、キーボードを使用してスライダーを移動する場合を処理するため、利点があります (入力にタブを付けて矢印キーを使用します)。

于 2013-10-28T00:38:19.780 に答える
0 
<script type="text/javascript">
    function range()
    {
//the simplest way i found
    var p = document.getElementById('weight');
    var res = document.getElementById('rangeval');
    res.innerHTML=p.value+ " Lbs";
    }
</script>

  <label for="weight">Your weight in lbs:</label>
  <input name="weight" type="range" id="weight" max="500" min="0" value="75" onChange="range()" onKeyUp="range()">
  <span id="rangeval"></span>
于 2014-03-24T17:09:43.560 に答える