When creating a HTML table using javascript it ends up showing "NaNNaNNaN" next to the table
NaNNaNNaN form the .innerHTML using html tag inside the script
multipe objects in the .innerHTML
Here’s code:
// Constructor function for Person objects
function Person(first, last, relation, gender, age, eye) {
this.firstName = first;
this.lastName = last;
this.relation = relation;
this.gender = gender;
this.age = age;
this.eyeColor = eye;
}
// Create 2 Person objects
const myFather = new Person("John", "Doe", "father", "Male", 50, "Blue");
const myMother = new Person("Sally", "Rally","mother", "Female", 48, "Green");
// Add a name method to first object
myMother.name = function() {
return "<table border= '2' align='center'>"+
"<tr>"+
"<th>"+"First Name"+"</th>"+
"<th>"+"Last Name"+"</th>"+
"<th>"+"Age"+"</th>"+
"<th>"+"Relation"+"</th>"+
"<th>"+"Gender"+"</th>"+
"<th>"+"Eye Color"+"</th>"+
+"</tr>"+
"<tr>"+
"<td>"+this.firstName+"</td>"+
"<td>"+this.lastName+"</td>"+
"<td>"+this.age+"</td>"+
"<td>"+this.relation+"</td>"+
"<td>"+this.gender+"</td>"+
"<td>"+this.eyeColor+"</td>"+
+"</tr>"+
+"</table>"
};
// Display full name
document.getElementById("demo").innerHTML +=
myMother.name(); <!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo">
</p>
</body>
</html>here’s output
>Solution :
You have typos (too many + +). But you really want something like this
Why only have a table row function for the mother?
function Person(first, last, relation, gender, age, eye) {
this.firstName = first;
this.lastName = last;
this.relation = relation;
this.gender = gender;
this.age = age;
this.eyeColor = eye;
this.name = () => `
<tr>
<td>${this.firstName}</td>
<td>${this.lastName}</td>
<td>${this.age}</td>
<td>${this.relation}</td>
<td>${this.gender}</td>
<td>${this.eyeColor}</td>
</tr>`;
};
// Create 2 Person objects
const myFather = new Person("John", "Doe", "father", "Male", 50, "Blue");
const myMother = new Person("Sally", "Rally", "mother", "Female", 48, "Green");
// Display full name
document.getElementById("demo").innerHTML += myMother.name();
document.getElementById("demo").innerHTML += myFather.name();thead<table border='2' align='center'>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
<th>Relation</th>
<th>Gender</th>
<th>Eye Color</th>
</tr>
</thead>
<tbody id="demo"></tbody>
</table>