javascript - javascript 生成的元素的 "Cannot set property ' insideHTML ' of undefined"

Question

在我的 html 表单中，当用户留下空白字段时，我想在字段下方打印一条消息。起初，我尝试在 html 中使用空跨度来包含可能的错误消息，并且它有效。但现在，我想通过 javascript 生成那些空的跨度。当我尝试在空跨度中打印innerHTML时，问题出现了，控制台显示“无法设置未定义的属性'innerHTML'”，但变量statusMessageHTML是在两个循环之外定义的，所以我不明白为什么会收到此错误.

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:我想用纯 JavaScript 来解决这个问题。

Answer 1

statusMessageHTML 对象上不存在属性 [i]。这就是未定义消息的原因。如果 statusMessageHTML[i] 未定义，则无法设置不存在的内容的 innerHTML 属性。

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>