使用JavaScript原型，需要動態添加div onclick

（我正在學習JavaScript中的原型..）我需要在div上動態添加學生的詳細信息，並通過使用javascript原型繼續添加更多按鈕（添加更多）時點擊。使用JavaScript原型，需要動態添加div onclick

到目前爲止，這裏是我的代碼：

的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; 

};

這是我的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>

我的小提琴：http://jsfiddle.net/2TMuB/

上午陷入其中，我不不知道如何動態創建新的學生對象並顯示它們。

來源

2014-02-26 Nevin Madhukar K

javascript中的原型編程。對不起，如果我標記另一個..將刪除它。 –

使用'document.createElement（）;'。你可以在[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/document.createElement）上閱讀更多關於它的信息。 – pstenstrm

因此你捕獲了你的s1 var和現在的信息？您需要將其轉儲到某個地方，例如通過動態構建學生條目列表。 jQuery允許簡單的動態DOM添加。 – mvw

請勿將addStudent函數作爲原型。

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

來源

2014-02-26 07:41:18 dongseok0

可以嗎？做這個工作的小提琴？ –

我以爲你的其他代碼有效，但它沒有！ :)我修復了一些錯誤，並使其工作。見：http://jsfiddle.net/dongseok0/2TMuB/2/ – dongseok0

謝謝你，你的回答對我的問題是完美的。 –

如果我們分析你的代碼，我們看到你的想法是一個學生可以加另一個學生。我認爲它是錯的（也許不是）。我認爲該系可以增加學生（這在我們的生活中更加真實）。

所以代碼（核心觀點）：

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

如何添加studens：

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

要訪問學生在部門

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>") 
}

您可以分析demo。

來源

2014-02-26 07:36:02

我不認爲你應該擴展一個學生的原型，這樣一個學生的新實例可以創建另一個學生。

我相信你可以創建一個可以添加學生的部門，也可以添加一個數組給所有學生，並在需要時進行過濾。

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);

來源

2014-02-26 07:41:05

你可以做這個工作的小提琴嗎？我認爲你的代碼幾乎有它。我用你的代碼做了一個臨時的fiddel ..但是它出現了一個錯誤：http://jsfiddle.net/2TMuB/1/ –

https://gist.github.com/anonymous/9227078 –

使用JavaScript原型，需要動態添加div onclick

回答

相關問題