title: getElementById() in for loop to retrieve input values
body: <p>In a <code>for</code> loop, I am using <code>getElementById()</code> to retrieve several input values in javascript.</p>
  
  <p>First I made a bunch of input boxes and set the different <code>id's</code> using a <code>for</code> loop.
  Now I'm using a second <code>for</code> loop to reference those <code>id's</code> and retrieve their input values.</p>
  
  <h2>Code:</h2>
  
  <pre><code>for (i=0;i&lt;products.length;i++){
      var display;
      display ="&lt;input type='number' id="+products[i][0]+" onchange=myFunction()&gt;";
      document.write(display);
  }
  
  
  document.write("&lt;p id=demo&gt;&lt;/p&gt;");
  
  function myFunction() {
      var totalVeg=0;
  
      for (j=0;j&lt;products.length;j++){
          amount = document.getElementById(products[j][0]).value;
          totalVeg += amount;
      }
      document.getElementById("demo").innerHTML = "You selected: " + totalVeg;
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Specifically I'm having trouble with this part:</p>
  
  <pre><code>amount = document.getElementById(products[j][0]).value;
  </code></pre>
  
  <p>If I reference a specific input, like <code>products[0][0]</code>, the value will be found. It is only when I try to reference an <code>id</code> using the <code>"j"</code> variable then the code stops working.</p>
  
  <p>I've read through some of the other questions and answers on here but none are exactly what I want.</p>
  
  <p>Thanks!</p>