title: JavaScript-updating multiple slider innerHTML
body: <p>I am making a <strong>table form</strong> where the user will adjust multiple sliders in the table.  I want to update the value to be displayed on the screen for each slider.  I tried to do this with <code>getElementsByClassName</code>, but when I adjust one slider, the output value is shown in all of the other sliders.  I guess I can assign an id to each slider (there are about 20), but I was wondering if there was a more efficient way to do this.  </p>
  
  <p>Here is a sample of the html code for the table inputs:</p>
  
  <pre><code>&lt;form&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th rowspan="5" id="A"&gt;&lt;/th&gt;
          &lt;td&gt;&lt;/td&gt;    
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;    
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;    
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="range" min="0" max="10" value="5" step="1" onChange="sliderChange(this.value)"/&gt;&lt;br /&gt;Current Value: &lt;span class="sliderStatus"&gt;5&lt;/span&gt;&lt;/td&gt;
      &lt;/table&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>and the JS Code:</p>
  
  <pre><code>//called when the user clicks the start button on the home page.
  function start(){
  var decisionA = prompt("Enter A:","");
  var decisionB = prompt("Enter B:","");
  
  //send user prompt inputs to A and B cells in the table&lt;th&gt;.
  document.getElementById('A').innerHTML = decisionA;
  document.getElementById('B').innerHTML = decisionB;
  }
  
  function sliderChange (val){
       var sliders = document.getElementsByClassName('sliderStatus');
       for (i = 0; i &lt; sliders.length; i++){
       sliders[i].innerHTML = val;
       }
     }
  </code></pre>
  
  <p>Is there a way to make the slider value text show the adjusted slider value for each individual slider in the table using <code>getElementsByClassName</code> or do I need to assign 20 different ids to all the sliders?  Thanks.</p>