Ok, here is the thing.
I have posted 2 days in a row and you guys have helped me a lot! And know I am almost done with the project, only a few things left, and a will ask another question later here.
But to the point! I am trying to use the .style.display = ... in my javascript and it doesnt work. I dont know if the function isnt calling or if I have done it all wrong?
What I am trying to accomplish is that when I press the button "newButton" I got a form field, and after I am finished with the form I press the button "addContact" that is created with the form all dynamically with javascript I want the form to hide. How can I do that?
The form is not gonna submit to a php and that is why a have button and not submit, because the form is gonna display at the HTML (DOM) and show like a contactlist.
Hope you could help me out! Here is the code.
//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);
Here is the last part of the code that I am trying to apply but doesnt work for me...
function onClick() {
var div = document.getElementById('formlist');
if (addForms.style.display !== 'none') {
addForms.style.display = 'none';
}
else {
addForms.style.display = 'block';
}
};
Here you have an JS FIDDLE for example: http://jsfiddle.net/192ds38a/ That one shows how it works now withuot the "onClick" function. But what I want is to hide the form when the AddContact button is pressed. That button is now made to add the information to the objects, but I also want that to hide the form.
