javascript - HTML slider 问题

Question

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

这是 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>

这是我用来打印 slider 值的 JavaScript 函数:

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

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

Answer 1

这里您使用的 ID 为 span 和 range。您可以对跨度使用不同的 id。

这是一个 DEMO