javascript - 将 slider 重置为初始值

Question

我已经在 HTML 文件中定义了这些 slider :

<div>
body angle -180 <input id="bodySlider" type="range"
 min="-180" max="180" step="10" value="0"
  />
 180
</div>
<div id="leftArmSlider">
left arm angle -90 <input id="leftArmSlider" type="range"
 min="-90" max="-20" step="10" value="-20"
  />
 -20
</div>
</div>
<div id="rightArmSlider">
right arm angle 20 <input id="rightArmSlider" type="range"
 min="20" max="90" step="10" value="20"
  />
 90
</div>
<div>
left leg angle -30 <input id="leftLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>
<div>
right leg angle -30 <input id="rightLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>

我想使用 JavaScript 文件中的函数将它们重置为初始值。是否有重置功能或其他方法可以做到这一点？

Answer 1

添加一个重置按钮。

<input id="reset" type="button" value="Reset">

这是重置函数

document.getElementById('reset').onclick = function(){
   document.getElementById('bodySlider').value = 0;
   document.getElementById('leftArmSlider').value = -20;
   // .... etc
};

确保不要在不同的 HMTL 元素上分配相同的 id，id 被认为是唯一的。