私のinnerHTMLメソッドは、私の連絡先フォームにあるものを一覧表示するのになぜ役に立ちませんか？

Question

私はプログラムを作っていますが、なぜ私はHTMLページに表示されるのはフォームであるのだろうかと思っていますが、1つだけです。順序付けられていないリストの箇条書きリストはどこにあるべきですか？フィールドにユーザー入力を入力しましたが、送信をクリックすると、フィールドにデータが表示されません。ここにコードがあります。

function getFormElements() { 
    var gather_form_elements = new Array(
     $("#first_name").val(), 
     $("#last_name").val(), 
     $("email").val(), 
     $("#phone_number").val() 
    ); 

    displayValues(gather_form_elements); 
} 

function displayValues(gather_form_elements) { 

    for(i=0; i<gather_form_elements.length; i++) 
    { 
     document.getElementById("contact_info").innerHTML = "<li>" + gather_form_elements[i] + "</li>"; 
    } 
} 

Answer 1

これはすべての繰り返しで上書きされているためです。このようinnerHTMLを使用する前に、HTMLを蓄積するようにしてください：

var html = ""; 
for(var i = 0; i < gather_form_elements.length; i++) { 
    html += "<li>" + gather_form_elements[i] + "</li>"; 
//  ^^ the += is crucial. If you don't use it, it will just replace the content of html (the innerHTML in your code), we need to use += to append to html instead of overriding it. 
} 
document.getElementById("contact_info").innerHTML = html; 

あなたは、コードの一行のみ使用して同じ結果をacheiveすることができます

document.getElementById("contact_info").innerHTML = 
    '<li>' + gather_form_elements.join('</li><li>') + '</li>';