将JavaScript滑块值绑定到变量

时间:2014-01-04 13:28:12

标签: javascript html

我正在试图找出如何将JavaScript滑块值存储为变量,以便稍后用于d3.js。

在我的HTML文档的头部,我有6个滑块,每个滑块显示0-100值。 我想将滑块值指定为变量 - 每个滑块一个变量。当然,在每个时间点,每个滑块只有一个值。 但我的想法是,我可以更改滑块位置以更改滑块值,然后点击更新按钮,然后较新的滑块值将成为新的变量值。

我尝试了各种不同的命名方法,但似乎都没有正确的语法。

我所了解的是,当我为使用滑块选择的值创建JavaScript变量时,如何通过id或name或输入id(html)来引用(滑块)表单。

关于如何让它发挥作用的任何想法?

我在网上搜索过,无法轻易找到解决方法,或者甚至找不到模板。欢迎任何建议。谢谢!

代码发布在下面(我拿走了我的非工作尝试,并用硬编码值替换为滑块位置的示例):

<p>   

<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
function get_nextsibling(n) {
    x=n.nextSibling;
 while (x.nodeType!=1) {
    x=x.nextSibling; }
 return x; }

function showValue(self) {
    get_nextsibling(self).innerHTML=self.value; }
</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(this)" />
    <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)" />
    <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)" />
    <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)" />
    <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)" />
    <span id="range">0</span>
</form>

</p> 

<script type="text/javascript">  
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body

var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // "           ""         weight4
var weightfactor5 = 12 ;  // "           ""         weight5
var weightfactor6 = 100 ; // "           ""         weight6

</script>

有关工作滑块的示例,请参阅:http://jsbin.com/ISekuSiN/5(我之前提出的有关此问题的解决方案,Displaying values from multiple JavaScript slider values

1 个答案:

答案 0 :(得分:0)

一些建议:

  1. 确保在运行JavaScript之前呈现了html
  2. 对于上述情况,您可以按如下方式使用文档对象:

    var weightFactor1 = document.getElementById(“weight1”)。value;