[英]appendChild() issue on button click
Final Output :I am trying to add Students and teachers on button clicks and display them separately. 最终输出 :我正在尝试按下按钮并添加学生和教师,并单独显示它们。
My JS : 我的JS:
function SchoolAdmission(name, age, department) {
this.name = name;
this.age = age;
this.department = department;
}
SchoolAdmission.prototype.display = function() {
var print = document.createElement("div");
print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department + "<br><br><br>";
$("button").click(function() {
if (this.id === "addStudent") {
document.getElementById('studentList').appendChild(print);
}
else {
document.getElementById('teacherList').appendChild(print);
}
});
};
addMember = function addMember() {
var s1 = new SchoolAdmission();
s1.name = document.getElementById('name').value;
s1.age = document.getElementById('age').value;
s1.department = document.getElementById('department').value;
s1.display();
};
Here's my fiddle : http://jsfiddle.net/LPu9x/ 这是我的小提琴 : http : //jsfiddle.net/LPu9x/
Basically am trying to do using prototype. 基本上我正在尝试使用原型。
So my issues are: 所以我的问题是:
1)On clicking the "Add student" or "Add Teacher",the data ends up in the wrong side. 1)单击“添加学生”或“添加教师”时,数据最终会出错。 (Resolved) (解决)
2)Can this program be done in a more efficient way?(Using Prototype) 2)这个程序能否以更有效的方式完成?(使用Prototype)
try this 尝试这个
function SchoolAdmission(name, age, department) {
this.name = name;
this.age = age;
this.department = department;
}
SchoolAdmission.prototype.display = function(nameButton) {
var print = document.createElement("div");
print.innerHTML = "Name: " + this.name + ", age:" + this.age + ", depart: " + this.department + "<br><br><br>";
if (nameButton === "addStudent") {
document.getElementById('studentList').appendChild(print);
}
else {
document.getElementById('teacherList').appendChild(print);
}
};
addMember = function addMember(e) {
var s1 = new SchoolAdmission();
s1.name = document.getElementById('name').value;
s1.age = document.getElementById('age').value;
s1.department = document.getElementById('department').value;
s1.display(e.target.id);
};
<button id="addStudent" onclick="addMember(event)">Add Student</button>
Do you object to jQuery? 你反对jQuery吗? FIDDLE 小提琴
JS JS
$('#name').focus();
$('#addStudent').click(function(){
var studentname = $('#name').val();
var studentage = $('#name').val();
var dept = $('#name').val();
$('#studentList').append('<li>' + studentname + '-' + studentage + '-' + dept + '</li>');
$('input').val('');
});
$('#addTeacher').click(function(){
var studentname = $('#name').val();
var studentage = $('#name').val();
var dept = $('#name').val();
$('#teacherList').append('<li>' + studentname + '-' + studentage + '-' + dept + '</li>');
$('input').val('');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.