Is this NaNNaNNaN error caused by concatenation or something else?

Question

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 ""+
      ""+
      ""+
      ""+
      ""+
      ""+
      ""+
      ""+
      +""+
      ""+
      ""+
      ""+
      ""+
      ""+
      ""+
    
      ""+
      +""+
      +""+"First Name"+" "+"Last Name"+" "+"Age"+" "+"Relation"+" "+"Gender"+" "+"Eye Color"+"
"+this.firstName+" "+this.lastName+" "+this.age+" "+this.relation+" "+this.gender+" "+this.eyeColor+""
      };
    // Display full name
    document.getElementById("demo").innerHTML +=
    myMother.name();


    
    
    JavaScript Object Constructors

here's output

user_200987 · Answer

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 NaN.

console.log(""+      +"" )

Why? Because of forced type coercion. The extra plus sign forces numeric conversion of a string, so "" 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.

user_295783 · Answer

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 = () => `
    
      ${this.firstName}
      ${this.lastName}
      ${this.age}
      ${this.relation}
      ${this.gender}
      ${this.eyeColor}
    `;
};

// 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


  
    
      First Name
      Last Name
      Age
      Relation
      Gender
      Eye Color

user_15639663 · Answer

Here's your updated code. I'm using Template Literals syntax. Learn more about Template Literals here. I've minimized your code so that you can add new rows in the table instead of repeating the whole table for each new entry.

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 = () => `
    
      ${this.firstName}
      ${this.lastName}
      ${this.age}
      ${this.relation}
      ${this.gender}
      ${this.eyeColor}
    `;
};

// Create 2 Person objects
const myFather = new Person("John", "Doe", "Father", "Male", 50, "Blue");
const myMother = new Person("Sally", "Rally", "Mother", "Female", 48, "Green");
const myBrother = new Person("Alex", "Doe", "Brother", "Male", 48, "Black");
// Display full name
document.getElementById("demo").innerHTML = myMother.name();
document.getElementById("demo").innerHTML += myFather.name();
document.getElementById("demo").innerHTML += myBrother.name();





  JavaScript Object Constructors
  
    
      
        First Name
        Last Name
        Age
        Relation
        Gender
        Eye Color

user_2251071 · Answer

permit me to Add... why not use interpolation with Template Literals on your variables, utilization of back ticks...

` ${this.firstName} 
  ${this.lastName} `

its going to save you a lot of stress, and you can get rid of the + concatenation signs.

Is this NaNNaNNaN error caused by concatenation or something else?

4 Answers