"javascriptで生成された要素の '未定義のinnerHTML'プロパティを設定できません

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

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

Answer 2

statusMessageHTMLは、ループの最初の要素のオブジェクトとして扱われるが、第2のループでは、アレイ

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