title: Changing DOM <input> values with a loop
body: <p>So all I want to do is use a loop to set the value attribute in this code from my DOM to 0.</p>
  
  <pre><code>&lt;input type="hidden" name="Pn_87001_qty" id="Pn_87001_qty" value="1" /&gt; 
  &lt;input type="hidden" name="Pn_87001_qty" id="Pn_87002_qty" value="1" /&gt; 
  &lt;input type="hidden" name="Pn_87001_qty" id="Pn_87003_qty" value="1" /&gt; 
  &lt;input type="hidden" name="Pn_87001_qty" id="Pn_87004_qty" value="1" /&gt; 
  </code></pre>
  
  <p>I have this function that creates an array with all of the  id's in it. </p>
  
  <pre><code>function testing02() {
      var eles = [];
      var inputs = document.querySelectorAll('[id^="Pn_"]');
      for (var i = 0; i &lt; inputs.length; i++) {
          if (inputs[i].name.indexOf('#Pn_') == 0) {
              eles.push(inputs[i]);
          }
      }
      console.log(inputs.length); 
  }
  </code></pre>
  
  <p>And I can change the value of individual value attributes with this code: </p>
  
  <pre><code>test01 = document.getElementById('Pn_87001_qty');
  test01.setAttribute("value", "1000");
  </code></pre>
  
  <p>That being said, I can not figure out a way to make a loop that sets the value attribute based on the ID's from my input array. Nor can I figure out a way to make the loop above fill the input array with the entire input element so that I can write a second loop to change the values. I've tried using .getElementsByName, .getElementsByClass as well as document.querySelector. </p>
  
  <p>I'm stuck and new to javascript. Any help would be greatly appreciated. I can do Jquery or Javascript</p>