Question

我正在尝试使用范围滑块，但我不能。如何添加事件处理程序，以便在用户选择值时，我的代码会读取该值。现在它的值总是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>

JAVASCRIPT：

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

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

但据我所知，这不是标准行为;你不能仅凭他们的身份来引用元素;你必须检索元素，然后通过DOM设置值。

我建议您通过javascript添加更改侦听器：

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

当然，您必须更新代码才能使用addEventListener或attachEvent，具体取决于您要支持的浏览器;这是JQuery真正有用的地方。

Answer 2

使用mouseup事件。

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

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

DEMO：http://jsfiddle.net/ZnYjY/1

Answer 3

您还可以使用FORM oninput方法：

<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更有优势，因为它处理使用键盘移动滑块的情况（选项卡到输入并使用箭头键）

Answer 4

使用R事件。

HTML代码：

right2 :: Either a Int
right2 = Right 2

left42 :: Either Double a
left42 = Left 42

main :: IO ()
main = print $ (+) <$> right2 <*> left42

JavaScript脚本

oninput

Demo

Answer 5

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

范围滑块事件处理程序Javascript

5 个答案:

单次阅读

更新范围值