显示来自多个JavaScript滑块值的值 [英] Displaying values from multiple JavaScript slider values

问题描述

我试图找出如何让多个滑块向右侧显示其值，这取决于我找到的示例： 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（ 范围）。innerHTML）获取要显示的值之一滑块。

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

任何人都可以解释我可以通过他们的名字或输入ID而不是输入类型来定位显示滑块值？或者将我指向一个资源，可以告诉我如何修改我现在拥有的资源？

通过这种方式，我可以让每个滑块为其自己的位置显示一个值。

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

  < p为H. 
 
<！ -  http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/  - > 
< text>< b> weight1< / b>< / text> < input id =weight1input type =rangename =weight1min =0max =100value =0step =1onchange =showValue（weight1.value）/ > 
< span id =range> 0< / span> 
< script type =text / javascript> 
函数showValue（newValue）
 {
 document.getElementById（range）。innerHTML = newValue; 
} 
< / script> 
< / form> 
 
 < text>< b> weight2< / b>< / text> < input id =weight2input type =rangename =weight2min =0max =100value =0step =1onchange =showValue（weight2.value）/ > 
< span id =range> 0< / span> 
< / form> 
 
 < text>< b> weight3< / b>< / text> < input id =weight3input type =rangename =weight3min =0max =100value =0step =1onchange =showValue（this.value）/ > 
< span id =range> 0< / span> 
< / form> 
 
 < text>< b> weight4< / b>< / text> < input id =weight4input type =rangename =weight4min =0max =100value =0step =1onchange =showValue（this.value）/ > 
< span id =range> 0< / span> 
< / form> 
 
< form name =weight5id =weight5> 
< text>< b> weight5< / b>< / text> < input id =weight5input type =rangename =weight5min =0max =100value =0step =1onchange =showValue（this.value）/ > 
< span id =range> 0< / span> 
< / form> 
 
 < text>< b> weight6< / b>< / text> < input id =weight6input type =rangename =weight6min =0max =100value =0step =1onchange =showValue（this.value）/ > 
< span id =range> 0< / span> 
< / form> 
< / p> 
  

（注意：当我意识到它没有工作时，我放弃了重命名showValue（this.value）作为一个唯一的标识符...）

据推测，一旦我知道如何抓取一个JavaScript滑块值来显示，我可以使用相同的技术来分配它一个变量在我的HTML文档中使用它...

任何洞察力都将非常感谢！

解决方案

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

I'm trying to figure out how to get multiple sliders to display their values to the right hand side, based on an example I found: http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/

(I then want to store each slider output as a JavaScript variable to use as an input to several functions, but first thing's first.)

I added an input id and name to each of the sliders (from http://html5tutorial.info/html5-range.php) as well as a form name and id (http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml) ... but I can't seem to modify the example function ( which uses document.getElementById("range").innerHTML ) to get the value to display for one of the sliders.

Thus, in their present state, all slider values reflect the 1st slider's position as opposed to the other ones. I've tried playing around with for a while, but have not made much progress beyond adding possible identifiers that I can't grab :-p.

Can anyone explain how I can target display slider values by their name or input id instead of input type? Or point me to a resource that could show me how to modify what I have now?

That way I could have each slider display a value for its own position.

I have the sliders in my header. Code is pasted below (I've left it so that the code runs, but each number displays the first slider's position):

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

(note: I abandoned renaming the showValue(this.value) when I realized it didn't work as a unique identifier...)

Presumably, once I know how to grab a JavaScript slider value to display, I can use that same sort of technique to assign it to a variable to use it in the body of my HTML document...

Any insight would be much appreciated!

解决方案

Id's have to be unique in a whole document. In this case range id is used in multiple span element. http://jsbin.com/ISekuSiN/5/

这篇关于显示来自多个JavaScript滑块值的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！