CODEWITHSUNDEEP
javascript
Elad Goldenberg
Elad Goldenberg

Reputation: 99

My javascript code doesnt print what i expected it to print

I am learning javascript objects. I am trying to output my object's role but it outputs the prototype instead..

function familyMember(role, name, age) {
  this.role = role;
  this.name = name;
  this.age = age;
}
var father = new familyMember("Dad", "Alex", 50);
var mother = new familyMember("Mom", "Nilly", 51);
father.role = function() {
  return this.role;
}
document.getElementById("demo").innerHTML = father.role();
<p id="demo"></p>

This is what it prints for me..

"function (){ return this.role; }"

Upvotes: 0

Views: 84

Answers (6)

SomewhereDave
SomewhereDave

Reputation: 483

That is, because you overwrite this.role with your function.

  1. you create father with this.role as "Dad"
  2. You overwrite this.role with your function
  3. You insert this.father (and thereby your function) into the HTML

Simply use a different name for your function like getRole().

function familyMember(role, name, age) {
  this.role = role;
  this.name = name;
  this.age = age;
}
var father = new familyMember("Dad", "Alex", 50);
var mother = new familyMember("Mom", "Nilly", 51);

father.getRole = function() {
  return this.role;
}
document.getElementById("demo").innerHTML = father.getRole();
<p id="demo"></p>

Upvotes: 0

Huginn
Huginn

Reputation: 230

As mentioned in the comments above you were overwriting some things. I adjusted what you had to remove some code that wasn't needed and update some of your variable names to stop the overlap. 

function familyMember(role, name, age) {
      this.memberRole = role;
      this.memberName = name;
      this.memberAge = age;
    }
    var father = new familyMember("Dad", "Alex", 50);
    var mother = new familyMember("Mom", "Nilly", 51);
    
    
    document.getElementById('demo').innerHTML = father.memberRole
<p id="demo"></p>

Upvotes: 0

esion
esion

Reputation: 238

Do you want it to return "Dad"? If so, you need to remove the second part and just keep it like this: 

function familyMember(role, name, age) {
  this.role = role;
  this.name = name;
  this.age = age;
}
var father = new familyMember("Dad", "Alex", 50);
var mother = new familyMember("Mom", "Nilly", 51);

document.getElementById("demo").innerHTML = father.role;

Upvotes: 0

kevinSpaceyIsKeyserS&#246;ze
kevinSpaceyIsKeyserS&#246;ze

Reputation: 4370

Or define a function which actually returns the Role instead of overwriting it with a function?

function familyMember(role, name, age) {
  this.role = role;
  this.name = name;
  this.age = age;
  this.getRole = function() {
    return this.role;
  }
}
var father = new familyMember("Dad", "Alex", 50);
var mother = new familyMember("Mom", "Nilly", 51);

document.getElementById("demo").innerHTML = father.getRole();
<p id="demo"></p>

Upvotes: 2

Axnyff
Axnyff

Reputation: 9944

father.role = function() {
   return this.role;
}

In this function, this is father so this.role is father.role: the function. You have overriden the value. You should name it something like father.getRole ( or even better familyMember.prototype.getRole )

Upvotes: 2

epascarello
epascarello

Reputation: 207501

Why well you override 

role = "Father"

with 

role = function()

It does not magically keep the string and the function when you use the same variable name.

Upvotes: 2

Related Questions