Pourquoi ma méthode innerHTML ne fonctionne-t-elle pas pour lister les éléments de mon formulaire de contact?

Question

Je fais un programme, et je me demande pourquoi tout ce que je vois sur ma page html est le formulaire, mais seulement un seul. où la liste à puces pour une liste non ordonnée devrait être. Je saisis l'entrée de l'utilisateur dans les champs, mais elle ne me montre pas les données dans les champs, comme c'est supposé le faire, lorsque je clique sur soumettre. Voici le 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

Parce que vous le surfez à chaque itération. Essayez d'accumuler le code html avant d'utiliser innerHTML comme ceci:

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; 

Vous pouvez acheive le même résultat en utilisant une seule ligne de code:

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