[英]Javascript Object in Array not printing
我创建了一个空数组和一个全局数组。 然后,我用HTML表单中的三个空对象填充空数组。 在Google Chrome浏览器中,它打印出以HTML表单输入的三个对象,但是HTML不在表中打印出来。
我如何使用简单出生日期下方的getElementById HMTL在HTML表中将其打印出来
<body>
<h1>Birth Registration</h1>
<hr />
<form id ="inputFrom">
<label>First Name:
<input type='text' id='firstname' value='Enter your name Here' />
</label>
<label>Last Name:
<input type='text' id='lastname' value='Enter your name Here' />
</label>
<label for="size_1">D.O.B:</label><input type="date" name="size" id="birthDate" value="dd/mm/yy" />
<input type='button' onclick='regBirth()' value='Add new person'/>
</form>
<hr />
<table id="details">
<tr>
<th>First NameName</th>
<th>Last Name</th>
<th>Date of Birth</th>
</tr>
</table>
<h4>Statistics</h1>
<hr />
<h5>Total Count:</h5><p id="count"></p>
</body>
</html>
JS下面
var allPeople = [];
function regBirth(){
var myArray = [];
myArray.fname = document.getElementById('firstname').value ;
myArray.lname =document.getElementById('lastname').value;
myArray.dob=document.getElementById('birthDate').value;
console.log(myArray);
console.log(allPeople);
var inputForm = document.getElementById("inputFrom").reset();
tabularForm = document.createDocumentFragment();
//Table structure variables
var tablerow;
for (i=0;i<allPeople.length;i++){
var iteration = allPeople[i];
tablerow = document.createElement('tr');
//first table cell
myArray.fname = document.createElement('td');
myArray.fname .innerHTML = iteration;
tablerow.appendChild(myArray.fname );
//Second table cell
myArray.lname = document.createElement('td');
myArray.lname.innerHTML = iteration;
tablerow.appendChild(myArray.lname);
//Third table cell
myArray.dob = document.createElement('td');
myArray.dob.innerHTML = iteration;
tablerow.appendChild(myArray.dob);
//Table row close
tabularForm .appendChild(tablerow);
}
document.getElementById("details").appendChild( tabularForm );
}
坦白说,我认为您的代码有很多错误。 我在下面提供了我认为是改进的示例,并在注释中加入了这些注释,希望可以帮助您理解错误。
function regBirth() {
// myArray should be instantiated as an object and not as an array
// because you are assigning object properties to it
// (and you should change its name ('person' seems appropriate))
var myArray = {};
myArray.fname = document.getElementById('firstname').value;
myArray.lname = document.getElementById('lastname').value;
myArray.dob = document.getElementById('birthDate').value;
// you need to add myArray to allPeople
// if you want allPeople to hold all of your people
allPeople.push(myArray);
// use var when you create tabularForm
// so that it is not added to global scope
var inputForm = document.getElementById("inputFrom").reset();
var tabularForm = document.createDocumentFragment();
var tablerow = document.createElement('tr');
// there is no need to iterate through the allPeople array
// you just need to append to the dom the latest person (ie., myArray)
var fname = document.createElement('td');
// assigning an object (iteration) to innerHTML is wrong
// you want to assign the object property, in this case: myArray.fname
fname.innerHTML = myArray.fname;
tablerow.appendChild(fname);
var lname = document.createElement('td');
lname.innerHTML = myArray.lname;
tablerow.appendChild(lname);
var dob = document.createElement('td');
dob.innerHTML = myArray.dob;
tablerow.appendChild(dob);
tabularForm.appendChild(tablerow);
document.getElementById("details").appendChild(tabularForm);
}
只需添加2个正斜杠,一切就可以了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.