如何为范围滑块创建事件处理程序
How to create an event handler for a range slider?
我正在尝试让范围滑块工作,但我不能。如何添加事件处理程序,以便在用户选择值时,我的代码会读取该值。现在它的价值总是 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");
}
}
吉斯菲德尔
单次读取
问题是你只读取一次值(在启动时),而不是每次事件发生时都读取它:
// 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真正有用的地方。
为此使用 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
您还可以使用 FORMs 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
具有优势,因为它处理使用键盘移动滑块的情况(按 Tab 键移动到输入并使用箭头键)
使用 oninput
事件。
网页代码:
<div id="slider">
<input class="bar" type="range" id="range-input" min="1" max="25" value="1"/>
<span class="highlight"></span>
<output id="range-value">1</output>
</div>
<button id="btn" type="submit">Submit</button>
Javascript脚本
(function() {
var rangeInput = document.getElementById("range-input")
var rangeValue = document.getElementById("range-value")
var button = document.getElementById("btn")
// Show alert message when button clicked
button.onclick = testTest
function testTest() {
let value = rangeInput.value
if(value > 0 && value < 5) {
alert("first")
return true
}
alert("second")
return false
}
// Print the range value to the output
rangeInput.oninput = rangeOutput
function rangeOutput() {
rangeValue.innerText = rangeInput.value
}
})()
演示
2021 年更新
另一种选择是使用输入事件处理程序,即eventTarget.addEventListener("input",alert("Hello World"),尽管此事件处理程序与oninput相同,区别在于我们可以使用addEventListener
<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>
相关文章:
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 在动态创建的元素中包含参数的事件处理程序
- 在Meteor中,我如何创建一个通用的事件处理程序
- 在Meteor中,我如何创建一个跨所有模板工作的通用事件处理程序
- 如何为范围滑块创建事件处理程序
- 3D 立方体创建和处理该多维数据集上的事件
- WinJS 不允许我将事件处理程序附加到动态创建的 HTML 元素
- 作用域和将参数传递给动态创建的事件处理程序时出现问题
- 为什么我的事件处理程序没有附加到在 jQuery 中创建的元素
- 在嵌套循环中创建事件处理程序的效率:我在这里创建了 1440 个函数
- 通过递归将事件处理程序绑定到动态创建的元素
- jQuery 委托加载新创建元素的事件处理程序
- 在对象创建时添加事件处理程序不起作用
- 如何在鼠标悬停事件处理程序中创建单击事件处理程序
- 如何在javascript中动态创建事件和事件处理程序
- 为用户在Firefox或Chrome中右键单击并检查元素创建事件处理程序
- 在创建事件处理程序时,jQuery是否会修改目标元素?
- 如何在不重新创建自身的循环中创建事件处理程序?
- 我创建了一个'事件处理程序,现在我如何为“Enter"”创建事件处理程序关键
- 创建事件处理程序时,从其他元素获取值