「無法設置一個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'

回答

相關問題