Ошибка не найдена, но я не вставил значение в свою таблицу

Question

Проблема заключается в том, что после нажатия кнопки «Добавить» в моей таблице нет значения. Когда я делаю свою программу объектно-ориентированной. Я не могу отобразить значения. Я пытаюсь найти, есть ли ошибка в моих кодах. Но, к сожалению, в моем журнале консоли нет ошибок. Может ли кто-нибудь помочь мне относительно моей проблемы или любого предложения?

function Person(id, firstName, lastName) {
	var _id = id;
	var _firstName = firstName;
	var _lastName = lastName;

	this.getId = function() {
		return _id;
	};
	this.getFirstName = function() {
		return _firstName;
	};
	this.getLastName = function() {
		return _lastName;
	};
}

Person.prototype.Display = function(){
      var values = new Array(4);
      values[0] = [this.getId(), this.getFirstName()];
    
      for (var i = 0 ; i < values; i++) {
         var tr = document.createElement("tr");

         for (var j = 0; j < values[i]; j++) {
           var td = document.createElement("td");
           var txt = document.createTextNode(values[i][j]);
           td.appendChild(txt);
           tr.appendChild(td);
         }

         tbody.appendChild(tr);
         mixed.appendChild(tbody);
     }
}  

function Student(id, firstName, lastName, course) {
	Person.call(id, firstName, lastName);

	var _course = course;

	this.getCourse = function() {
		return _course;
	} 
}

Student.prototype = new Person();

Student.prototype.Display = function(){
      var values = new Array(4);
      values[0] = [this.getId(), this.getFirstName(), this.getCourse()];
    
      for (var i = 0 ; i < values; i++) {
         tr = document.createElement("tr");

         for (var j = 0; j < values[i]; j++) {
           var td = document.createElement("td");
           var txt = document.createTextNode(values[i][j]);
           td.appendChild(txt);
           tr.appendChild(td);
         }

         tbody.appendChild(tr);
         mixed.appendChild(tbody);
     }
}  

 var id = 0;
  function myFunction() {
      var txtFirstName = document.getElementById("txtFirstName");
      var txtLastName = document.getElementById("txtLastName");
      var selCourse = document.getElementById("selCourse");
      var mixed = document.getElementById("mixed");
      var tbody = document.createElement("tbody");
      id++;

      var objPerson = new Person(id, txtFirstName.value, txtLastName.value, selCourse.value);

      objPerson.Display();
  }

 FirstName:<br>
    <input type="text" id="txtFirstName"><br><br>
  LastName:<br>
    <input type="text" id="txtLastName"><br><br>
  Course:<br>
    <select id = "selCourse">
      <option value = "BSIT">BSIT</option>
      <option value = "BSCS">BSCS</option>
      <option value = "BSA">BSA</option>
      <option value = "BSN">BSN</option>
    </select><br><br>
  <button onclick= "myFunction()">Add</button>

  <table id="mixed" border = "1px">
    <tr>
      <th>ID</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Course</th>
    </tr>
  </table>

Answer 1

Кажется, ваша логика внутри Display () неверна. Пожалуйста, смотрите ниже пример, чтобы вы были более ясными.

var id = 0;
var tbody;

function Person(id, firstName, lastName, course) {
  var _id = id;
  var _firstName = firstName;
  var _lastName = lastName;
  var _course = course;

  this.getId = function() {
    return _id;
  };
  this.getFirstName = function() {
    return _firstName;
  };
  this.getLastName = function() {
    return _lastName;
  };
  this.getCourse = function() {
    return _course;
  };

}

Person.prototype.Display = function() {
  var values = [this.getId(), this.getFirstName(), this.getLastName(), this.getCourse()];
  var tr = document.createElement("tr");
  for (var j = 0; j < values.length; j++) {
    var td = document.createElement("td");
    var txt = document.createTextNode(values[j]);
    td.appendChild(txt);
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
  mixed.appendChild(tbody);
}

function myFunction() {
  var txtFirstName = document.getElementById("txtFirstName");
  var txtLastName = document.getElementById("txtLastName");
  var selCourse = document.getElementById("selCourse");
  var mixed = document.getElementById("mixed");
  tbody = document.createElement("tbody");
  id++;

  var objPerson = new Person(id, txtFirstName.value, txtLastName.value, selCourse.value);

  objPerson.Display();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
FirstName:<br>
<input type="text" id="txtFirstName"><br><br> LastName:
<br>
<input type="text" id="txtLastName"><br><br> Course:
<br>
<select id="selCourse">
  <option value="BSIT">BSIT</option>
  <option value="BSCS">BSCS</option>
  <option value="BSA">BSA</option>
  <option value="BSN">BSN</option>
</select><br><br>
<button onclick="myFunction()">Add</button>

<table id="mixed" border="1px">
  <tr>
    <th>ID</th>
    <th>FirstName</th>
    <th>LastName</th>
    <th>Course</th>
  </tr>
</table>