Warum funktioniert meine innerHTML-Methode nicht, um Dinge in meinem Kontaktformular aufzulisten?

Question

Ich mache ein Programm, und ich frage mich, warum alles, was ich auf meiner HTML-Seite sehe, das Formular ist, aber nur ein einziges. wo die Aufzählung für eine ungeordnete Liste sein sollte. Ich gebe die Benutzereingabe in die Felder ein, aber es zeigt mir nicht die Daten in den Feldern, wie es soll, wenn ich auf "Senden" klicke. Hier ist der Code.

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

Weil Sie es bei jeder Iteration übersteuern. Versuchen Sie, die html zu akkumulieren, bevor innerHTML wie folgt aus:

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; 

Sie können das gleiche Ergebnis acheive nur eine Zeile Code verwendet:

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