CODEWITHSUNDEEP
javascriptfunctionobjectmethods
two2fly
two2fly

Reputation: 43

Javascript: Defining the value of object property using a function

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>

Upvotes: 2

Views: 65

Answers (4)

darelf
darelf

Reputation: 4659

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()

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159865

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

Upvotes: 0

Nimnam1
Nimnam1

Reputation: 513

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;
}

Upvotes: 1

Max Meijer
Max Meijer

Reputation: 1729

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;
  }

Upvotes: 0

Related Questions