javascript - 手动添加到 HTML 范围输入会产生意外结果

Question

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>

Link to Codepen

我在手动更改范围输入的值时遇到问题。

如果我从该值中减去，一切都会按预期工作(它会减少我正确指定的值)，但是当我尝试添加到输入时，我遇到了问题。它要么最大值为 1.75，要么有时在跳过步骤时一直跳到 3。

谁能告诉我这里发生了什么？谢谢。

Answer 1

问题是该值是一个字符串，因此您要添加一个字符串和一个数字。所以你需要将字符串更改为数字，然后添加它。

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>