好的,事情就是这样。
我已经连续发帖两天了,你们对我帮助很大!我知道我几乎完成了这个项目,只剩下一些事情了,稍后我会在这里问另一个问题。
但是说到重点了! 我试图在我的 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 按钮时隐藏表单。现在,该按钮用于将信息添加到对象,但我也希望它隐藏表单。
最佳答案
只需将 document.getElementById("formList").remove()
添加到 addNewContact
函数,如 http://jsfiddle.net/192ds38a/1/ 中所示。 。还是这不能满足您的需求?
关于javascript - 按下按钮表单后隐藏表单 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26678197/