CODEWITHSUNDEEP
javascriptjqueryprototype
Nevin
Nevin

Reputation: 3296

appendChild() issue on button click

Final Output:I am trying to add Students and teachers on button clicks and display them separately.

My 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/

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. (Resolved)

2)Can this program be done in a more efficient way?(Using Prototype)

Upvotes: 0

Views: 119

Answers (2)

TimSPQR
TimSPQR

Reputation: 2984

Do you object to jQuery? FIDDLE

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

Upvotes: 0

Paulo Lima
Paulo Lima

Reputation: 1238

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>

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

Upvotes: 2

Related Questions