为什么单击音量减小按钮正确减小而音量增大按钮增加到最大

Question

在我的音乐播放器中，每当我单击音量减小按钮时，它都会按照我的事件监听器回调函数中的预期减小 10。但是，对音量增大按钮使用相同的逻辑，而不是将值增加 10，而是从当前值一直到最大值 100。为什么会这样，我该如何解决？

const music = document.querySelector('audio');
const volume_slider = document.getElementById('volume_slider');
const volume_down = document.getElementById('down');
const volume_up = document.getElementById('up');

function setVolume() {
  music.volume = volume_slider.value / 100;
}

volume_down.addEventListener('click', () => {
  volume_slider.value -= 10;
  setVolume();
  console.log(music.volume)
});
volume_up.addEventListener('click', () => {
  volume_slider.value += 10;
  setVolume();
  console.log(music.volume)
});

<div class="player-container">
    <audio src="music/BioUnit.mp3"></audio> 
    <div class="volume-container">
        <div class="volume">
            <button id="down">Down</button>
            <input type="range" min="0" max="100" value="50" step="10" id="volume_slider" onChange="setVolume()">
            <button id="up">Up</button>
        </div>
    </div>
</div>

Answer 1

我认为这是因为该值是一个字符串。请参阅下面的示例：

const music = document.getElementById("music");
const volume_slider = document.getElementById('volume_slider');
const volume_down = document.getElementById('down');
const volume_up = document.getElementById('up');

function setVolume() {
  music.volume = volume_slider.value / 100;
}

volume_down.addEventListener('click', () => {
  console.log(typeof volume_slider.value)
  var oldValue = Number(volume_slider.value)
  volume_slider.value = oldValue - 10;
  setVolume();
  console.log(music.volume)
});
volume_up.addEventListener('click', () => {
  console.log(typeof volume_slider.value)
  var oldValue = Number(volume_slider.value)
  volume_slider.value = oldValue + 10;
  setVolume();
  console.log(music.volume)
});

<audio id="music"></audio>
<div class="volume-container">
  <div class="volume">
    <button id="down">Down</button>
    <input type="range" min="0" max="100" value="50" step="10" id="volume_slider" onChange="setVolume()">
    <button id="up">Up</button>
  </div>
</div>

Answer 2

添加一些事件并调度 up/down 其中一个事件 - 添加了一个指标结果并删除了一些 unknown/undefined 东西。

通过将值乘以 1 使其显而易见。

const volume_slider = document.getElementById('volume_slider');
const volume_down = document.getElementById('down');
const volume_up = document.getElementById('up');
let music = {
  volumn: 0
};
const eventV = new Event('volume');

function setVolume(v) {
  console.log("v:", v, typeof v);
  volume_slider.value = (volume_slider.value * 1) + (v * volume_slider.step);
  console.log(volume_slider.value)
  music.volume = volume_slider.value / 100;
  volume_slider.dispatchEvent(eventV);
}

volume_slider.addEventListener('volume', function(e) {
  console.log("what to do:", e.target.value);
  const result = document.querySelector('#result');
  result.textContent = `You like ${event.target.value}`;
}, false);

function handleClicker(e) {
  let v = e.target.dataset.volume * 1;
  console.log("change by:", v);
  setVolume(v);
}
volume_slider.addEventListener('change', (event) => {
  event.target.dispatchEvent(eventV);
});

volume_down.addEventListener('click', handleClicker);
volume_up.addEventListener('click', handleClicker);

<div class="volume-container">
  <div class="volume">
    <i class="fas fa-volume-down" data-volume="-10" id="down">down</i>
    <input type="range" min="0" max="100" value="50" step="1" id="volume_slider">
    <i class="fas fa-volume-up" data-volume="10" id="up">up</i>
  </div>
</div>
<div id="result"></div>

为什么单击音量减小按钮正确减小而音量增大按钮增加到最大

Why does clicking the volume down button decrement correctly while volume up button increases to the max

javascript

dom-events