Javascript: Defining the value of object property using a function

Question

I'm trying to create a simple program that will assign a number (riskLevel) based on the amount of experience (totalTime) a person has and input it all into a quick table in HTML.

I am having a problem with the this.riskLevel value. I am trying to have it take the totalTime value and use an if/else statement to assign an integer to riskLevel.

When I call the getCrewmember() function (using the submit button) the firstName, lastName, and totalTime, all populate correctly in the HTML table. The riskLevel doesnt, it just writes out the entire code for the function.

What am I doing wrong? Also, I want to be able to input a name into the html text input field, and have that person's name come up in the program. How can I tell the getCrewmember() function to take the value that is entered into the text feild?

Here is the code:

function pilot(firstName, lastName, totalTime){
   this.firstName=firstName;
   this.lastName=lastName;
   this.totalTime=totalTime;
   this.riskLevel=function(){  
    if(this.totalTime >= 1000){
        riskLevel = 1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
   }
}
}

var jdoe = new pilot("Jon", "Doe", 480)
function getCrewmember(){
  document.getElementById("firstName").innerHTML = jdoe.firstName;
  document.getElementById("lastName").innerHTML = jdoe.lastName;
  document.getElementById("totalHours").innerHTML = jdoe.totalTime;
  document.getElementById("riskLevel").innerHTML = jdoe.riskLevel;
}
</script>

<table>
    <thead>
        <th>First</th>
        <th>Last</th>
        <th>Total Hours</th>
        <th>Risk Level</th> 
    </thead>
    <tr>
        <td id="firstName">First Name</td>
        <td id="lastName">Last Name</td>
        <td id="totalHours">Total Hours</td>
        <td id="riskLevel">Risk Level</td>
    </tr>
    <tr>
        <td><input type="text" id="textField"></td>
    </tr>
    <tr>
        <td><input type="submit" value="Get Crewmember" onclick="getCrewmember()"></td>
    </tr>

</table>

You want to call the method: jdoe.riskLevel(), and you want to return 1|2|3; instead of assigning to risklevel — Bergi
– Bergi, Commented Feb 25, 2014 at 19:36

Nimnam1 · Accepted Answer · 2014-02-25 19:38:17Z

1

You're assigning the variable to the function try

either a self executing function

riskLevel = (function(){  
    if(this.totalTime >= 1000){
    return  1;
    }else if(this.totalTime >=500){
    return 2;
   }else if(this.totalTime >= 250){
    return 3;
   }
})();

or assigning to a variable outside the function

var riskLevel;
function setRisk(){  
    if(this.totalTime >= 1000){
    riskLevel =  1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
   }
};
setRisk()

or don't us a function at all and just do the if else

if(this.totalTime >= 1000){
   riskLevel =  1;
}else if(this.totalTime >=500){
   riskLevel = 2;
}else if(this.totalTime >= 250){
   riskLevel = 3;
}

answered Feb 25, 2014 at 19:38

Nimnam1

5134 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

two2fly Over a year ago

Awesome. I just got it working now. Also, thank you for the multiple solutions, it helps wrap my head around what is going on.

Max Meijer · Accepted Answer · 2014-02-25 19:37:39Z

0

Replace this:

this.riskLevel=function(){  
    if(this.totalTime >= 1000){
        riskLevel = 1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
  }
}

by this:

  if(this.totalTime >= 1000){
        this.riskLevel = 1;
  }else if(this.totalTime >=500){
        this.riskLevel = 2;
  }else if(this.totalTime >= 250){
        this.riskLevel = 3;
  }

answered Feb 25, 2014 at 19:37

Max Meijer

1,7291 gold badge15 silver badges24 bronze badges

Comments

Sean Vieira · Accepted Answer · 2014-02-25 19:42:48Z

riskLevel is a function, which can be assigned to different variables (including the innerHTML of a DOM element). When you assign it to a DOM element this function is turned into a string. What you want to do is get the calculated value of riskLevel, which means you will need to invoke the function (rather than just assigning it).

First, you will need to return the value of riskLevel:

this.riskLevel = function() {
  // Create a local, rather than global
  // variable to hold the return value
  var riskLevel = 4;
  if (this.totalTime >= 1000) {
    riskLevel = 1;
  } else if (this.totalTime >=500) {
    riskLevel = 2;
  } else if (this.totalTime >= 250) {
    riskLevel = 3;
  }
  return riskLevel;
}

Then you will need to change your invocation:

document.getElementById("riskLevel").innerHTML = jdoe.riskLevel(); // Invoke it

Now, every time you call somePilot.riskLevel() you will get the current risk level of the pilot. When the pilot's total time changes, so will his risk level.

ECMAScript 5 solution

If you want riskLevel to appear to be just like totalTime (e. g. just another property) you can use Object.defineProperty to create a computed getter in your pilot constructor:

Object.defineProperty(this, 'riskLevel', {
  get: function() {
    var riskLevel = 4;
    // Rest of riskLevel code goes here, along with return
  },
  writable: false
});

Then you will be able to get the value of riskLevel just as if it was any other property (in browsers that support ES5) and you will get the computed value. (That is to say, .innerHTML = jdoe.riskLevel will just work.)

Thanks Sean. This is a very small part of my very first HTML/CSS/JS project, I've got a lot to learn and appreciate the super fast response

darelf · Accepted Answer · 2014-02-25 19:43:41Z

0

I think this is what you meant:

this.riskLevel= function(){  
  if(this.totalTime >= 1000){
    return 1;
  }else if(this.totalTime >=500){
    return 2;
  }else if(this.totalTime >= 250){
    return 3;
  }
}

and then you would call it:

document.getElementById("riskLevel").innerHTML = jdoe.riskLevel()

answered Feb 25, 2014 at 19:43

darelf

4,6592 gold badges20 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript: Defining the value of object property using a function

4 Answers 4

1 Comment

Comments

ECMAScript 5 solution

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

ECMAScript 5 solution

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related