范围滑块事件处理程序Javascript

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

演示：http : //jsfiddle.net/ZnYjY/1