“无法设置一个JavaScript生成元素undefined的属性'innerHTML'

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

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来解决这个问题。

来源

2017-08-06 GhostOrder

'statusMessageHTML'不是阵列 - 为什么不能在您创建'statusMessageHTML'同一回路设置的innerHTML？或'formFields [i] .lastElementChild.innerHTML = ...'在第二个循环中 –

@JaromandaX谢谢！我忘记了那个细节。 – GhostOrder

属性[I]不将statusMessageHTML对象上存在。这是未定义消息的原因。如果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>

来源

2017-08-06 00:48:30 thomasmeadows

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

来源

2017-08-06 00:46:58

“无法设置一个JavaScript生成元素undefined的属性'innerHTML'

回答

相关问题