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/中看到。或者这不符合您的需求吗？

按下表单后按javascript隐藏表单

1 个答案: