binding JavaScript slider values to variables

Question

I'm trying to figure out how to store JavaScript slider values as variables, to use later on for d3.js.

In the head of my html doc I have 6 sliders, each which displays 0-100 value. I want to assign the slider values as variables – one variable for each slider. At each point in time, of course, each slider will only have one value. But the idea is that I can change the slider position to change the slider value, and then hit an update button and then the newer slider values will become the new variable values.

I've tried a variety of different naming methods but none seems to be the right syntax.

What I am caught up on, is how to refer to the (slider) form by id or name or input id, which is html, when I create JavaScript variables for the values that are selected using the sliders.

Any ideas on how I can get this to work?

I searched online and could not readily find a solution on how to do this, or even a template to go off of. Any suggestions are welcome. Thanks!

Code is posted below (I took away my non-working attempts and replaced with hard coded values as an example for what slider positions could look like):

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

See: http://jsbin.com/ISekuSiN/5 for an example of the working sliders (solution that was provided to a prior question I had about this, Displaying values from multiple JavaScript slider values )

Answer 1

Couple of suggestions:

1. Make sure your html has been rendered before running your JavaScript

2. For the case above case you can use the document object as follows:

   var weightFactor1 = document.getElementById("weight1").value;