title: getElementById not working when ID's are numbers
body: <p>I am trying to create button labels based off of user input by inserting a span with the label text via js. The id's of all my buttons are numbers in a sting format so id="0", id="1", etc. </p>
  
  <p>The following function will only label the first button with id="0". </p>
  
  <pre><code>gearInputs = document.getElementsByClassName('Box');
  
  for (i=0; i&lt;gearInputs.length; i++) {
  var gearName = gearInputs[i].value,
    gearButton = document.getElementById(i);
    if(gearName &amp;&amp; gearName != ''){
      gearButton.innerHTML = '&lt;span class="resultsButtons"&gt;' + gearName +  '&lt;/span&gt;';
    }
  
  }
  </code></pre>
  
  <p>My buttons: </p>
  
  <pre><code>&lt;button id="0" class="buttonshowHide" onclick="showHide(this.id)"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>My input box: </p>
  
  <pre><code>&lt;input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput1"/&gt;
  </code></pre>
  
  <p>I have also tried i.toString(); with no luck. If I enter 0 as the id in document.getElementById it will label the first button but if i put 1, 2 etc it fails whether I enter it as 1, "1", or i.toString(); where i is 1. </p>
  
  <p>I am sure this is simple and I am just overlooking something. </p>