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属性。

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

Answer 2

statusMessageHTML在第一个for循环中被视为元素对象，但在第二个循环中，您将其视为数组

    // 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"
}

“无法设置javascript生成元素的未定义属性'innerHTML'

2 个答案: