0
137
ViewsIs this NaNNaNNaN error caused by concatenation or something else?
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
3 answers
Answer question0
As mplungjan says, you have too many plus signs, but here is what is happening and why:
When you have this snippet, the result is </tr>NaN.
console.log("</tr>"+ +"</table>" )Why? Because of forced type coercion. The extra plus sign forces numeric conversion of a string, so "</table>" becomes a number. An invalid number in this case (NaN = Not a Number).
1 + "1"
> '11'
1 + +"1"
> 2
1 + + "not a number"
> NaN
"a string" + + "not a number"
> 'a stringNaN'
So why does the table still render? Because of a permissive DOM rendering model. If some nodes are missing the browser will still try to render the resulting DOM nodes, completing missing end tags as required.
0
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>Age</th>
<th>Relation</th>
<th>Gender</th>
<th>Eye Color</th>
</tr>
</thead>
<tbody id="demo"></tbody>
</table>0
permit me to Add... why not use interpolation with Template Literals on your variables, utilization of back ticks...
`<td> ${this.firstName} </td>
<td> ${this.lastName} </td>`
its going to save you a lot of stress, and you can get rid of the + concatenation signs.