HTML Sliders问题

Question

我正在尝试打印滑块旁边的滑块值。移动滑块时，第一个滑块起作用，其值会发生变化。我不知道为什么，但第二个滑块改变了第一个滑块旁边打印的值。我希望能够正确打印每个滑块的值。

这是HTML：

 <div>
 <STRONG>Theta</STRONG>
 <input id="thetaSlider" type="range"
 min="0" max="360" step="1" value="0" onchange="displayValue(this.value)"/>
 <span id="range">0</span>
</div>

<div>
 <STRONG>Subdivide</STRONG> 
 <input id="subdivideSlider" type="range"
 min="0" max="6" step="1" value="0" onchange="displayValue(this.value)"/>
  <span id="range">0</span>
</div>

这是我用来打印滑块值的javascript函数：

<script type="text/javascript">
        function displayValue(value)
        {
            document.getElementById("range").innerHTML=value;
        }
    </script>

为什么javascript函数在被两个不同的滑块调用时使用相同的变量？如何更改javascript函数以执行我想要的操作？

Answer 1

您使用span range的ID。你可以使用不同的id作为跨度。

这是 DEMO