Wie man mehrere Benutzer einträgt

Question

Ich habe eine Frage für Sie und ich hoffe, dass Sie in der Lage sein werden, etwas Licht auf meine Situation zu werfen. Momentan mache ich ein Projekt und brauche Hilfe. Wir haben kein Buch zu benutzen, also war es schwer so weit zu kommen und nichts über die Sache zu wissen. Ich habe seit Wochen versucht und konnte nicht bekommen, was ich brauchte, also entschied ich mich endlich um Hilfe zu bitten

Ich versuche gerade ein Formular zu erstellen, das es mir erlaubt, einen Benutzer einzugeben, und die Informationen in anzuzeigen ein Textbereich Ich kann das tun, aber ich muss in der Lage sein, mehr als nur eine Person zu speichern Beispiel ist unter example. Derzeit kann meins nur einen Benutzer halten. Ich bin nicht wirklich gut mit Arrays und weiß nicht viel über sie.

Kann jemand helfen? Dies ist meine einzige Möglichkeit, es herauszufinden, weil ich nicht weiß, was ich von hier aus tun soll.

Hier ist mein Code:

<script> 
    var memberArray = [name, birthday, gender]; 

    function myFunction() { 
    var name = document.getElementById("myForm").elements[0].value; 
    var birthday = document.getElementById("myForm").elements[1].value; 
    var gender = document.getElementById("myForm").elements[2].value; 
    } 

    function displayMembers() { 
    var x = document.getElementById("name").value; 
    document.getElementById("textArea").innerHTML = x; 
    var y = document.getElementById("birthday").value; 
    document.getElementById("textArea").innerHTML = y; 
    var z = document.getElementById("gender").value; 
    document.getElementById("textArea").innerHTML = z; 
    var finish = [x, y, z]; 
    for (i = 0; i < count; i++) { 
     finish[i] + ","; 
    } 
    document.getElementById("textArea").innerHTML = finish; 
    } 

    function reset() { 
    document.getElementById("myForm").reset() 
    } 
</script> 

Answer 1

Hier ist ein Beispiel dafür, wie zu schaffen, was Sie wollen.

Der wichtigste Aspekt ist die Trennung von Bedenken, so dass Sie nicht auf die HTML angewiesen sind, um sich an Ihre Mitglieder für Sie zu erinnern.

//A list of members 
 
var members = []; 
 

 
//Adding a member. Notice how it doesn't care about the DOM 
 
function addMemberFunction(name, birthday, gender) { 
 
    //Add the new member as an object to the list 
 
    members.push({ 
 
    name: name, 
 
    birthday: birthday, 
 
    gender: gender 
 
    }) 
 
} 
 

 
//DOM 
 
function drawMembers() { 
 
    //Get out list 
 
    var list = document.getElementById("members"); 
 
    //Empty list 
 
    list.innerHTML = ''; 
 
    //For each member 
 
    for (var i = 0; i < members.length; i++) { 
 
     var member = members[i]; 
 
     //Add list item 
 
     list.innerHTML += '<li>' + 
 
     //Accessing the current member object 
 
     member.name + 
 
     ' (' + 
 
     member.gender + 
 
     '), ' + 
 
     member.birthday.getFullYear() + 
 
     '</li>'; 
 
    } 
 
    } 
 
    //reset dom function 
 

 
function reset() { 
 
    document.getElementById("name").value = ''; 
 
    document.getElementById("day").value = '1'; 
 
    document.getElementById("month").value = '1'; 
 
    document.getElementById("year").value = '2016'; 
 
    document.getElementById("gender").checked = false; 
 
    } 
 
    //Listen for create 
 
document.getElementById("createMember") 
 
    .addEventListener("click", function() { 
 
    //Add member 
 
    var name = document.getElementById("name").value; 
 
    var birthday = new Date(
 
     document.getElementById("year").value + 
 
     '-' + 
 
     document.getElementById("month").value + 
 
     '-' + 
 
     document.getElementById("day").value 
 
    ); 
 
    var gender = document.getElementById("gender").checked ? "male" : "female"; 
 
    addMemberFunction(name, birthday, gender); 
 
    //Reset form 
 
    reset(); 
 
    //Draw result 
 
    drawMembers(); 
 
    }, false) 
 

 
//Listen for reset 
 
document.getElementById("resetMember") 
 
    .addEventListener("click", reset, false) 
 

 
//Start 
 
drawMembers();

<div id="addMemberControls"> 
 
    <p>Name: 
 
    <input type="text" id="name" placeholder="Name" title="Name" value="" /> 
 
    </p> 
 
    <p>Birthday: 
 
    <input type="number" min="1" max="31" id="day" placeholder="Day" title="Day" value="1" /> 
 
    <input type="number" min="1" max="12" id="month" placeholder="Month" title="Month" value="1" /> 
 
    <input type="number" min="1900" max="2020" id="year" placeholder="Year" title="Year" value="2016" /> 
 
    </p> 
 
    <p>Gender:(check for male) 
 
    <input id="gender" type="checkbox" /> 
 
    </p> 
 
    <button id="createMember">Create member</button> 
 
    <button id="resetMember">Reset</button> 
 
</div> 
 
<ol id="members"> 
 

 
</ol>