title: QuerySelectorAll not working with onclick event
body: <h2>Scenario</h2>
  
  <p>I've got some text inputs and I want them to have a width of 500px when they're clicked.</p>
  
  <h2>My code</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inputs = document.querySelectorAll("input[type=text]")
  for(i=0; i&lt;inputs.length; i++){
   inputs[i].onclick = function(){
    inputs[i].style.width = "500px";
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="sometext"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>What's not working</h2>
  
  <p>On chrome console, I'm getting "Cannot read property 'style' of undefined" on the following line: <code>inputs[i].style.width = "500px";</code> when I click on the input.</p>
  
  <h2>My question</h2>
  
  <p>How can I fix my code?</p>