Question

我有一个html范围元素，可以在滑块标记的实现上更新页面上的数字。我想知道是否有办法让它在被移动而不是被实现时更新这个数字。这是我的代码：

＆＃13;

updateSlider();

function updateSlider() {
  document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value;
  document.getElementById('P1S_value').innerHTML = document.getElementById("P1S").value;
}

＆＃13;

<h1>Player 1</h1>
<div class="slidecontainer">
  <h2 align="center">Health:</h2>
  <h3 align="center" id="P1H_value">100</h3>
  <input type="range" min="0" max="100" value="100" class="slider" id="P1H" onChange="updateSlider();">
  <h2 align="center">Shield:</h2>
  <h3 align="center" id="P1S_value">0</h3>
  <input type="range" min="0" max="100" value="0" class="slider" id="P1S" onChange="updateSlider();">
</div>

＆＃13;

Answer 1

input事件在某些浏览器上执行此操作。（This answer表示IE不支持它。）

updateSlider();

function updateSlider() {
  document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value;
  document.getElementById('P1S_value').innerHTML = document.getElementById("P1S").value;
}

<h1>Player 1</h1>
<div class="slidecontainer">
  <h2 align="center">Health:</h2>
  <h3 align="center" id="P1H_value">100</h3>
  <input type="range" min="0" max="100" value="100" class="slider" id="P1H"
     onchange="updateSlider();" oninput="updateSlider()">
  <h2 align="center">Shield:</h2>
  <h3 align="center" id="P1S_value">0</h3>
  <input type="range" min="0" max="100" value="0" class="slider" id="P1S"
     onchange="updateSlider();" oninput="updateSlider()">
</div>

Answer 2

您可以使用 oninput 代替 onchange

在幻灯片HTML JavaScript上更新滑块（范围）

2 个答案: