CODEWITHSUNDEEP
javascripthtmldynamicprototype
Nevin
Nevin

Reputation: 3296

Using javascript prototype, need to dynamically add div onclick

(I am studying prototype in javascript..) I need to dynamically add student details on a div and keep adding more by using javascript prototype when a button(Add More) is clicked.

So far here's my code:

Javascript :

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

Student.prototype.addStudent = function() {
    var s1 = new Student();
s1.name = document.getElementById('name').value;
s1.age = document.getElementById('age').value;
s1.department = document.getElementById('department').value;

};

And here's my html:

 <!DOCTYPE html>
    <html>
        <head>
            <title>Prototype_Student</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <link rel="stylesheet" href="../css/student_style.css"/>
        </head>
        <body>
            <div>Student List</div>
            Name:<input class="inputFields" id="name"/><br><br>
            Age:<input class="inputFields" id="age"/><br><br>
            Department:<input class="inputFields" id="department"/><br><br>
            <button id="addMore" onclick="addStudent(name, age, department);">Add Student</button>
            <script src="../js/student_main.js"></script>
        </body>
    </html>

My fiddle: http://jsfiddle.net/2TMuB/

Am getting stuck where i don't know how to create new student objects dynamically and to display them.

Upvotes: 1

Views: 567

Answers (3)

Emil A.
Emil A.

Reputation: 3445

I don't think you should extend the prototype of a Student, this way a new instance of a student could create another student.

I believe you could either create a department which could add students, or you could add an array with all students and filter it later as needed.

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

var addButton = document.getElementById("addMore");

var allStudents = [];

addButton.addEventListener("click", function (e) {
    var name = document.getElementById("name").value,
        age = document.getElementById("age").value,
        department = document.getElementById("department").value;

    var student = new Student(name, age, department);

    allStudents.push(student);
    console.log(allStudents);

}, false);

Upvotes: 1

dongseok0
dongseok0

Reputation: 757

Do not make addStudent function to prototype.

function Student(name, age, department) {
    this.name = name;
    this.age = age;
    this.department = department;
}

Student.prototype.display = function() {
    document.write("Name: " + this.name + ", age:" + this.age + "<br>")
};

function addStudent() {
    var s1 = new Student();
    s1.name = document.getElementById(name);
    s1.age = document.getElementById(age);
    s1.department = document.getElementById(department);
}

Upvotes: 1

Farkhat Mikhalko
Farkhat Mikhalko

Reputation: 3655

If we analyze your code, we see that you idea is that one student can add another student. I think its a wrong(maybe not). I think that department can add students(it more real in our life).

So code (core ideas):

var department = function(name){
  this.name = name;
  this.students = [];
}

var student = function(name, dep, age){
  this.name = name;
  this.dep = dep;
  this.age = age;
  // other logic
}

department.prototype.addStudent = function(){
  // logic to get student data ( i write static information, you need write dynamic)
  var name = "asdfasdf",
      age  = 12;
  var n_student = new student(name, this.name, age);
  this.students.push(n_student);
}

How to add studens:

var it_dep = new department("IT");
it_dep.addStudent();
it_dep.addStudent();

To access students in department

for(var i = 0; i < it_dep.students.length; i++){
    document.write("Name: " + it_dep.students[i].name + ", age:" + it_dep.students[i].age + "<br>")
}

You can analyze demo.

Upvotes: 0

Related Questions