appendChild（）问题按钮单击

最终输出：我试图添加学生和教师按钮单击并单独显示它们。appendChild（）问题按钮单击

我的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(); 
};

这里是我的小提琴：http://jsfiddle.net/LPu9x/

基本上我试图使用原型做。

所以我问题是：

1）在点击“添加学生”或“添加老师”，该数据在错误的一边结束。 （解决）

2）这一程序以更有效的方法是什么？（使用原型）来完成

来源

2014-02-27 Nevin Madhukar K

@VisioN其内部的单击事件handler..so this.id应该是按钮ID –

@试点烨是GNA说.. :) –

@Pilot嗯，确实如此。对不起，我的错。 – VisioN

试试这个

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>

http://jsfiddle.net/LPu9x/3/

来源

2014-02-27 12:20:23

嘿保罗，thanx ... :) 最初我的逻辑是做一个类似的事情，就像你做的一样（通过传递按钮ID到其各自功能）。但这是最好的方法吗？（使用原型功能） –

在你的场景中没有理由使用，因为原型通常用于模拟OOP（polimosfirsmo，...），但我相信我没有禁忌症 –

你反对的jQuery？ FIDDLE

$('#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(''); 
});

来源

2014-02-27 12:46:24 TimSPQR

是的，jquery会更容易... 但是我想研究js原型......所以thnx无论如何:) –

appendChild（）问题按钮单击

回答

相关问题