手动添加到HTML范围输入会产生意想不到的结果
手动添加到HTML范围输入会产生意想不到的结果
提问于 2018-12-10 20:37:30
const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
minusBtn.addEventListener('click', function() {
console.log(sliderInput.value)
sliderInput.value -= 0.25;
renderTooltip();
console.log(sliderInput.value)
});
plusBtn.addEventListener('click', function() {
console.log(sliderInput.value)
sliderInput.value += 0.25;
renderTooltip();
console.log(sliderInput.value)
})
function renderTooltip() {
sliderTracker.innerHTML = sliderInput.value
}<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>
<button class="minus">subtract</button>
<button class="plus">add</button>
我遇到了手动更改范围输入值的问题。
如果从值中减去，一切都按预期工作(它减少了我正确指定的值)，但是，当我尝试向输入添加时，我会遇到问题。它要么在1.75时达到最大值，要么在跳过步骤时一直跳到第3步。
有人能告诉我这里发生了什么吗？谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-10 20:42:24
问题是这个值是一个字符串，所以您要添加一个字符串加上一个数字。因此，您需要将字符串更改为数字，而不是添加它。
const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
minusBtn.addEventListener('click', function() {
console.log(sliderInput.value)
sliderInput.value -= 0.25;
renderTooltip();
console.log(sliderInput.value)
});
plusBtn.addEventListener('click', function() {
console.log(typeof sliderInput.value, sliderInput.value, )
sliderInput.value = +sliderInput.value + 0.25;
renderTooltip();
console.log(sliderInput.value)
})
function renderTooltip() {
sliderTracker.innerHTML = sliderInput.value
}<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>
<button class="minus">subtract</button>
<button class="plus">add</button>
Stack Overflow用户
发布于 2018-12-10 20:45:50
我猜这是因为有时您碰到了min和max限制，而控件不会反映它们，但是值仍然存在于内存中，所以下次单击它时，它仍然需要增加或减少才能回到范围内。
您可以通过将min/max构建到增量/递减逻辑中来解决这一问题。
const sliderInput = document.querySelector('input');
const sliderTracker = document.querySelector('.slider-tracker span');
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
var value = 1.5;
minusBtn.addEventListener('click', function() {
console.log(sliderInput.value)
value = Math.max(0.5, value - 0.25)
sliderInput.value = value;
renderTooltip();
console.log(sliderInput.value)
});
plusBtn.addEventListener('click', function() {
console.log(sliderInput.value)
value = Math.min(3, value + 0.25);
sliderInput.value = value;
renderTooltip();
console.log(sliderInput.value)
})
function renderTooltip() {
sliderTracker.innerHTML = sliderInput.value
}<input class="slider" type="range" name="slider" min="0.5" max="3" value="1.5" step="0.25">
<div class="slider-tracker"><span>0.5</span></div>
<button class="minus">subtract</button>
<button class="plus">add</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53713271
复制相关文章
相似问题
腾讯云开发者
