显示来自多个 JavaScript 滑块值的值答案

【问题标题】：Displaying values from multiple JavaScript slider values显示来自多个 JavaScript 滑块值的值
【发布时间】：2014-01-13 22:05:46
【问题描述】：

根据我找到的一个示例，我试图弄清楚如何让多个滑块在右侧显示它们的值：http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/

（然后我想将每个滑块输出存储为 JavaScript 变量，以用作多个函数的输入，但首先要做的是。）

我为每个滑块添加了一个输入 ID 和名称（来自http://html5tutorial.info/html5-range.php）以及一个表单名称和 ID（http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml）......但我似乎无法修改示例函数（使用 document.getElementById("range").innerHTML ) 来获取要为其中一个滑块显示的值。

因此，在当前状态下，所有滑块值都反映了第一个滑块的位置，而不是其他滑块的位置。我已经尝试了一段时间，但除了添加我无法抓取的可能标识符之外没有取得太大进展：-p。

谁能解释我如何通过名称或输入 id 而不是输入类型来定位显示滑块值？或者向我指出一个可以告诉我如何修改我现在拥有的资源的资源？

这样我可以让每个滑块显示其位置的值。

我的标题中有滑块。代码粘贴在下面（我保留它以便代码运行，但每个数字显示第一个滑块的位置）：

<p>   
<form name = "weight1" id = "weight1" >
<!-- http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/ -->
    <text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(weight1.value)" />
    <span id="range">0</span>
    <script type="text/javascript">
    function showValue(newValue)
    {
        document.getElementById("range").innerHTML=newValue;
    }
    </script>
</form>

<form name = "weight2" id = "weight2" >
    <text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(weight2.value)" />
    <span id="range">0</span>
</form>

<form name = "weight3" id = "weight3" >
    <text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
    <span id="range">0</span>
</form>

<form name = "weight4" id = "weight4" >
    <text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
    <span id="range">0</span>
</form>

<form name = "weight5" id = "weight5" >
    <text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
    <span id="range">0</span>
</form>

<form name = "weight6" id = "weight6" >
    <text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
    <span id="range">0</span>
</form>
</p>

（注意：当我意识到它不能作为唯一标识符时，我放弃重命名 showValue(this.value)...）

大概，一旦我知道如何获取要显示的 JavaScript 滑块值，我就可以使用相同的技术将其分配给一个变量，以便在我的 HTML 文档的正文中使用它...

任何见解将不胜感激！

【问题讨论】：

标签： javascript html

【解决方案1】：

ID 在整个文档中必须是唯一的。在这种情况下，范围 id 用于多个跨度元素。 http://jsbin.com/ISekuSiN/5/

【讨论】：