title: Sign Up Form onclick/for loop
body: <p>I'm working on a sign up page where a user clicks on an input tag and 
  a span tag appears to the right specifying the requirements </p>
  
  <p>Ex. User clicks on input and span says "Username must be at least __ characters long" </p>
  
  <p>I set the span in the css file as display:none</p>
  
  <p>then in my javascript file contains the code below:</p>
  
  <pre><code>//lists all the input tags in an array
  var signUpInputs = document.getElementsByClassName("signUpInputs");
  
  for(var index=0; index &lt; signUpInputs.length;index++ ){
      alert("hi"); **//Just to check if function works and it does**
  **//The following code below doesn't though. In the console it says "Uncaught    
      TypeError: Cannot read property 'style' of undefined "**
  
      signUpInputs[index].onclick=function(){
   document.getElementsByClassName("errorFormMessage")[index].style.display="inline-   
      block";
  }
  }//end of for loop
  </code></pre>
  
  <p>I'm not sure why it says that it can't read the property style of undefined because I believe I defined it when I used document.getElementsByClassName </p>