Question

我正在尝试创建一个简单的程序，根据一个人的经验数量（totalTime）分配一个数字（riskLevel），并将其全部输入到HTML快速表中。

我遇到了this.riskLevel值的问题。我试图让它采用totalTime值并使用if / else语句为riskLevel分配一个整数。

当我调用getCrewmember（）函数（使用提交按钮）firstName，lastName和totalTime时，都会在HTML表中正确填充。 riskLevel不会，它只是写出函数的整个代码。

我做错了什么？此外，我希望能够在html文本输入字段中输入名称，并在程序中显示该人的姓名。如何告诉getCrewmember（）函数获取输入文本字段的值？

以下是代码：

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>

Answer 1

您将变量分配给函数试试

自我执行功能

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

或分配给函数外的变量

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

或者根本不是我们的功能而只是做if else

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

Answer 2

riskLevel是一个函数，可以分配给不同的变量（包括DOM元素的innerHTML）。将它分配给DOM元素时，此函数将变为字符串。你想要做的是得到riskLevel的计算值，这意味着你需要调用函数（而不是仅仅分配它）。

首先，您需要返回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;
}

然后你需要改变你的调用：

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

现在，每次拨打somePilot.riskLevel()，您都会获得飞行员当前的风险等级。当飞行员的总时间发生变化时，他的风险等级也会发生变化。

ECMAScript 5解决方案

如果您希望riskLevel 出现就像totalTime（例如只是另一个属性），您可以使用Object.defineProperty在您的<{3}}中创建一个计算出来的getter pilot构造函数：

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

然后，您将能够获得riskLevel的值，就像它是任何其他属性（in browsers that support ES5）一样，您将获得计算值。（也就是说，.innerHTML = jdoe.riskLevel将正常工作。）

Answer 3

替换它：

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

由此：

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

Answer 4

我认为这就是你的意思：

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

然后你会称之为：

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

Javascript：使用函数定义对象属性的值

4 个答案:

ECMAScript 5解决方案