"Cannot set property 'innerHTML' of undefined" of a javascript generated element

Question

In my html form, when users leave blank fields I want to print a message below the fields. At first I tried using empty spans in my html to contain the possible error messages and it worked. But now, I want to generate those empty spans via javascript. The problem comes when I try to print a innerHTML in my empty spans, the console shows me "Can not set property' innerHTML 'of undefined" but variable statusMessageHTML is defined outside both loops so I do not understand why I'm getting this error.

JS

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

myForm.addEventListener('submit', function(){
  event.preventDefault(); 
    var statusMessageHTML;     
    // create empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML = document.createElement('span');
        statusMessageHTML.className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML);     
    }
    // print a string in empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML[i].innerHTML = "Error Message"
    }      
  return false;
});

HTML

<form method="POST" action="form.php">
  <label>
    <input type="text" name="name" placeholder="Your name*">      
  </label>
  <label>
    <input type="text" name="number" placeholder="Your phone number*">        
  </label>
  <label>
    <input type="text" name="email" placeholder="Your e-mail*">      
  </label>
  <label>
    <input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female        
  </label>
  <label>
    <textarea name="message" rows="2" placeholder="Your message"></textarea>        
  </label>
  <button type="submit" value="Submit">SUBMIT</button>
</form>

CODEPEN

PD: I want to solve this with pure javascript.

Answer 1

the attribute [i] does not exist on the statusMessageHTML object. That is the reason for the undefined message. If statusMessageHTML[i] is undefined, then you cannot set the innerHTML attribute of something that does not exist.

var myForm = document.getElementsByTagName('form')[0];
var formFields = document.getElementsByTagName('label');

myForm.addEventListener('submit', function(){
  event.preventDefault(); 
    var statusMessageHTML;     
    var elementArray = [];
    // create empty spans
    for(i = 0; i < formFields.length; i++){
      statusMessageHTML = document.createElement('span');
        statusMessageHTML.className = 'status-field-message';
      formFields[i].appendChild(statusMessageHTML);     
      elementArray.push(statusMessageHTML);
    }
    // print a string in empty spans
    for(i = 0; i < elementArray.length; i++){
      elementArray[i].innerHTML = "Error Message"
    }      
  return false;
});

<form method="POST" action="form.php">
  <label>
    <input type="text" name="name" placeholder="Your name*">      
  </label>
  <label>
    <input type="text" name="number" placeholder="Your phone number*">        
  </label>
  <label>
    <input type="text" name="email" placeholder="Your e-mail*">      
  </label>
  <label>
    <input type="radio" name="gender" value="male">Male
    <input type="radio" name="gender" value="female">Female        
  </label>
  <label>
    <textarea name="message" rows="2" placeholder="Your message"></textarea>        
  </label>
  <button type="submit" value="Submit">SUBMIT</button>
</form>

Answer 2

statusMessageHTML is treated as element object in the first for loop but in the second loop you are assuming it as an array

    // create empty spans
for(i = 0; i < formFields.length; i++){
  statusMessageHTML = document.createElement('span');
  statusMessageHTML.className = 'status-field-message';
  formFields[i].appendChild(statusMessageHTML);  
  statusMessageHTML.innerHTML = "Error Message"
}