将按钮表单按下后隐藏表格javascript

Question

好的，这是事情。

我已经连续发布了2天，你们帮了我很多！并且知道我几乎完成了这个项目，只剩下几件事情，并且稍后会在这里提出另一个问题。

但是到了这一点！ 我想在我的JavaScript中使用.style.display = ...它不起作用。 我不知道该函数是不是调用，或者如果我做了这一切都错了？

我想要完成的是，当我按下按钮“newButton”时，我得到一个表单域，并且在完成表单的操作后，我按下了“addContact” javascript我希望表单隐藏。我怎样才能做到这一点？

表单不会提交给php，这就是为什么有一个按钮，而不是提交，因为表单将显示在HTML（DOM）并显示为一个联系人列表。

希望你能帮助我！ 这是代码。

//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 = []; 

var ul1 = document.createElement('ul'); 
    ul1.id = ('nav'); 

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

// Calling the object 
function addForms(){ 
    var body = document.getElementsByTagName('body')[0] 
    var form = document.createElement("form"); 
    form.id = 'formList'; 
    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.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.addEventListener('click', onClick); 
     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.length = 0; 
    contacts.push(new Contact(input1, input2, input3, input4, input5)); 
    } 

// Knappning för ny kontakt 
var button = document.getElementById("newButton"); 
button.addEventListener("click", addForms); 

这里是我想申请，但我不工作的代码的最后一部分...

function onClick() { 
    var div = document.getElementById('formlist'); 
    if (addForms.style.display !== 'none') { 
     addForms.style.display = 'none'; 
    } 
    else { 
     addForms.style.display = 'block'; 
    } 
}; 

这里有一个JS FIDDLE例如：http://jsfiddle.net/192ds38a/ 那一个节目如何使用“onClick”功能。 但我想要的是当按下AddContact按钮时隐藏窗体。该按钮现在可以将信息添加到对象，但我也希望隐藏该表单。

Answer 1

只需在addNewContact函数中添加document.getElementById("formList").remove()函数即可，如http://jsfiddle.net/192ds38a/1/所示。或者这不符合您的需求？