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

Question

好的，事情就是这样。

我已经连续两天发帖了，你们帮了我很多！并且知道我几乎完成了这个项目，只剩下一些东西了，稍后我会在这里问另一个问题。

但重点！ 我正在尝试在我的 javascript 中使用 .style.display = ... 但它不起作用。 我不知道是函数没有调用还是我做错了？

我想要完成的是，当我按下按钮“newButton”时，我得到了一个表单字段，在完成表单后，我按下了使用 javascript 动态创建的表单“addContact”按钮我希望表格隐藏。我该怎么做？

表单不会提交给 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

只需将 document.getElementById("formList").remove() 添加到 addNewContact 函数即可，正如您在 http://jsfiddle.net/192ds38a/1/ 中看到的那样。或者这不能满足您的需求？