양식 값에서 개체로 정보 푸시가 작동하지 않습니다.

Question

JavaScript로 작성한 양식의 값을 개체로 가져 오는 데 문제가 있습니다.

메신저 프로젝트에 주소록을 만들고 여기에 붙어있어 무엇을 해야할지 몰라. 그래서 누군가가 저를 도울 수 있다면!

코드의 첫 번째 부분은 내가 만든 객체 기능입니다. 그리고 그 연락처를 li에 추가합니다. 코드의 두 번째 부분은 양식을 만들고 5 개의 입력 필드로 양식을 반복하는 것입니다. 코드의 세 번째 부분과 마지막 부분은 수행 할 작업이나 수행 방법을 알지 못하는 부분입니다.

폼의 값을 가져와 오브젝트 (인수로?)에서 (contacts = [];)로 밀어 넣을 필요가 있지만 작동하지 않습니다. .. 를 바랍니다

//Contactlist funktion 
function Contact(fname, lname, address, email, phone) { 
    this.fname = fname; 
    this.lname = lname; 
    this.address = address; 
    this.email = email; 
    this.phone = phone; 
} 

//The contacts 
var contacts = []; 


// Appending the objects 
function theContacts() { 
    var body = document.getElementsByTagName('body')[0], 
     outerUL = document.createElement('ul'), 
     length = contacts.length; 
    outerUL.className = 'contactlist'; 
    for (var i = 0; i < length; i++) { 
     var cont = contacts[i], 
      li = document.createElement('li'), 
      ul = document.createElement('ul'); 
     li.className = 'contact'; li.innerHTML = cont.fname + ' ' + cont.lname; 
     ul.className = 'infos'; 
     for (var key in cont) { 
      var info = document.createElement('li'); 
      info.className = key; 
      info.innerHTML = cont[key]; 
      ul.appendChild(info); 
     } 
     li.appendChild(ul); outerUL.appendChild(li); 
    } 
    body.appendChild(outerUL);    

} 

후 나는이 부분을 가지고는 ...

// Calling the object 

function addForms(){ 
    var body = document.getElementsByTagName('body')[0] 
    var form = document.createElement("form"); 
    var myArray = ['fnameValue', 'lnameValue', 'addressValue', 'emailValue', 'phoneValue']; 
    var texts = ['First Name: ', 'Last Name: ', 'Address: ', 'Email: ', 'Phone: ']; 

// Create a loop of 5 
for(var i = 0; i < 5; i++){ 
    var input = document.createElement('input'); 
    var newlabel = document.createElement('label'); 
//  newlabel.setAttribute('for', myArray[i]); 
     newlabel.innerHTML = texts[i]; 
    form.appendChild(newlabel); 
    input.setAttribute('type','text'); 
    input.setAttribute('id', myArray[i]); 

    // adds the input's to the form. 
    form.appendChild(input); 
    } 

    // adds the forms to the body 
    body.appendChild(form); 

    // Add Contact Button 
    var addContact = document.createElement('input') 
     addContact.setAttribute('type', 'button') 
     addContact.setAttribute('id', 'addContact') 
     addContact.setAttribute('value', 'Add Contact') 
     form.appendChild(addContact); 

    var knapp = document.getElementById('addContact'); 
     knapp.addEventListener('click', addNewContact)  
} 

이 내가 함께 붙어하고있는 부분이며, 잘 어쩌면 내가 너무 위의 코드를 수정해야 나도 몰라 도와주세요.

function addNewContact() { 
     var input1 = document.getElementById('fnameValue').value; 
     var input2 = document.getElementById('lnameValue').value; 
     var input3 = document.getElementById('addressValue').value; 
     var input4 = document.getElementById('emailValue').value; 
     var input5 = document.getElementById('phoneValue').value; 
    contacts.push(input1, input2, input3, input4, input5);  
    } 

document.getElementById("newButton").addEventListener("click", addForms); 

Answer 1

나는 몇 가지 사항을 분류했지만, 아직 일부 작업이 삭제되었습니다. 어쨌든, 버튼에 직접 이벤트 리스너를 부착하여 작업 addNewContact() 방법에있어 : ​​I가 어떤 요소를 추가하기 전에 콘택트 어레이를 비운 addNewContact() 방법

addContact.addEventListener('click', addNewContact, false); 

를 인해 그렇지 번째 'addContact 버튼 후 배열에 두 배의 요소가있을 것입니다.

contacts.length = 0; //this empties the array 
contacts.push(input1, input2, input3, input4, input5); 

또는, 대신에, 상기 일을, I는 콘택트 배열로 연락 객체를 추가 직접 시도 : 티무 제안 같이 I는 addNewContact() 방법에서 무한 루프 호출을 제거

contacts.push(new Contact(input1, input2, input3, input4, input5)); 

마지막

이러한 작업을 수행 한 후에 addNewContact() 메서드에서 호출 된 부분적으로 작동하는 theContacts() 메서드가 있습니다. Fiddle