标题总结了一下。我正试图减去和input
事件的值。减法累加,但总和总是跳到mousewheel
的最大值。没有库,纯JS和兼容性对我来说是无关紧要的,因为它是一个电子应用程序。
我有另一个选项,我不完全倾向于使用,因为对我来说,它很难看:创建一个变量来求和和和减去值,设置最大值和最小值并发送到input
(但由于某种原因,我无法将最小值或最大值设置为一个变量)。
现在的问题是:是虫子还是我做错了什么?
let range = document.getElementById("test");
let onWheel = (function (evt) {
if (!evt) evt = event;
let wDelta;
wDelta = evt.wheelDelta > 0 ? 1 : -1;
if (wDelta === 1) {
range.value += wDelta;
console.log(wDelta);
} else {
range.value -= 1;
console.log(wDelta);
}
document.getElementById('out').innerHTML = range.value;
console.log(range.value);
});
range.addEventListener('mousewheel', onWheel ,false);
<input type="range" id="test" min="1" max="5">
<output id="out"></output>
最佳答案
事实证明,这实际上是一个数据类型问题:由于range.value
返回一个字符串,range.value += 1
将执行字符串连接而不是整数相加。解决方法很简单:
range.value = parseInt(range.value) + wDelta;
奇怪的是,这只影响加法情况,因为
-
运算符执行隐式整数转换。let range = document.getElementById("test");
let onWheel = (function(evt) {
if (!evt) evt = event;
let wDelta = evt.wheelDelta > 0 ? 1 : -1;
range.value = parseInt(range.value) + wDelta;
document.getElementById('out').innerHTML = range.value;
});
range.addEventListener('mousewheel', onWheel, false);
<input type="range" id="test" min="1" max="5">
<output id="out"></output>