【发布时间】：2014-09-02 09:54:36
【问题描述】：
JavaScript 新手。
我正在尝试创建一个简单的计算器，其显示值会随着用户输入更多信息而动态更新。我的问题：在用户输入最终表单值（所有值）之前，绿色圆圈中显示的“速率”始终显示为“NaN”。
我尝试使用 .value、parseFloat 等。如果有任何建议或更正，我将不胜感激——我知道 JS 不是很优雅（也不是很好）。
JSFiddle 这里： http://jsfiddle.net/thinkhuman/8ftuw/
谢谢！
更新：一个海报解决了下面的 NaN 问题，但问题的另一半是：“rate”值（在绿色圆圈中）在 associated_costs 时没有更新和不可计费的值发生变化。对此有什么建议吗？
<!--Web page for the JS app-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>What's My Rate?</title>
<!-- <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
--> <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="title">
<h1>What's My Rate?</h1>
<h3>Calculate your real-world freelance rate for web design/development.</h3>
</div>
<div class="calcwrapper">
<div class="entries">
<label for="targetsalary">Target salary (yearly):</label>
<input type="text" id="target_salary" name="targetsalary" onchange="calculate();">
<br />
<label for="associatedcosts">Associated costs (%):</label>
<input type="text" id="associated_costs" name="associatedcosts" onchange="calculate();">
<br />
<label for="timeoff">Time off (hours/year):</label>
<input type="text" id="timeoff" name="timeoff" onchange="calculate();">
<br />
<label for="nonbillable">Non-billable time (%):</label>
<input type="text" id="nonbillable" name="nonbillable" onchange="calculate();">
<br />
<label for="profit">Desired profit (%):</label>
<input type="text" id="profit" name="profit" onchange="calculate();">
</div>
<div class="ratedisplay">
<p class="rate" id="required_rate"></p>
<p class="ratesubtitle">per hour</p>
</div>
<div class="moreinfo">
<p>For a detailed explanation of why calculating your real-world rate is critical, see <a href="http://blog.teamtreehouse.com/calculate-hourly-freelance-rates-web-design-development-work" target="_blank"> Neil Tortorella's excellent blog post </a> on Teamtreehouse.com.</p>
</div>
</div>
<script src="whatsmyrate.js"></script>
</body>
</html>
CSS：
body {
/* font-family: 'Nunito', sans-serif;
*/ color: #384047;
font-family: Arial,Helvetica, sans-serif;
}
.calcwrapper{
max-width: 700px;
height: 250px;
margin: 10px auto;
padding: 10px 10px;
background: #f4f7f8;
border-radius: 8px;
border: 2px solid black;
}
.entries{
max-width: 400px;
padding: 10px 20px;
float:left;
}
.ratedisplay{
background-color: #5fcf80;
float: right;
color: #fff;
height: 150px;
width: 150px;
font-size: 4.0em;
border: 1px solid #3ac162;
margin-right: 150px;
margin-bottom:30px;
line-height: 30px;
text-align: center;
border-radius: 100%;
box-shadow: 0 -5px 0 rgba(255,255,255,0.1) inset;
}
.ratesubtitle{
font-size: 0.4em;
color: black;
margin-top: 10px;
}
.rate{
color: #FFF;
text-align: center;
margin-bottom: 10px;
vertical-align:middle;
text-shadow: 0 3px 0 rgba(255,255,255,0.2);
}
.title{
margin: auto;
text-align: center;
}
input{
display: inline-block;
border: none;
margin-bottom: 5px;
margin-left: 20px;
max-width: 100px;
font-size: 18px;
height: auto;
/* margin: 0;
*/ outline: 0;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;
}
.moreinfo{
display:inline-block;
margin: auto;
text-align: center;
}
label{
display: inline-block;
float: left;
width: 200px;
text-align: right;}
...aaa 和 JavaScript：
//A tool for calculating your real-world hourly rate for web design/development work.
/***************
PROCESS OVERVIEW
****************/
//1. Specify target_salary.
//2. Specify associated_costs %.
//3. Calculate new target_salary (target_salary + associated_costs).
//4. Specify time_off (holidays, vacation, sick days), and subtract from total_yearly_hours.
//5. Specify non-billable time, subtract from total hours.
//6. Calculate overhead % ((hourly_rate * overhead)+ hourly_rate)
//7. Specify profit %, and add to hourly_rate
/*********
VARIABLES
**********/
//target_salary
//associated_costs(%)
//total_required_salary = target_salary + associated_costs
//time_off = 176 hours (holidays 56, vacation 80 , sick days 40)
//non_billable_time = 25%
//overhead_costs(%)
//profit
//total_yearly_hours = 2080
//billable_hours = total_yearly_hours - (time_off + non_billable_time)
//required_rate = total_required_salary / billable_hours
//document.getElementById("required_rate").style.display='none';
function calculate() {
var total_yearly_hours = 2080;
// Get values for ALL elements on screen
var target_salary = document.getElementById("target_salary");
var associated_costs = document.getElementById("associated_costs");
var timeoff = document.getElementById("timeoff");
var nonbillable = document.getElementById("nonbillable");
var profit = document.getElementById("profit");
var required_rate = document.getElementById("required_rate");
// Get the user's input from the input elements.
var salary = parseFloat(target_salary.value);
var costs = parseFloat(associated_costs.value) / 100;
var vacation = parseFloat(timeoff.value);
var freehours = parseFloat(nonbillable.value);
var extra = parseFloat(profit.value) / 100;
// Compute the total required salary and billable hours.
var total_salary = (salary * (costs / 100)) + salary;
var billable_hours = total_yearly_hours - ((freehours/100)+vacation);
var rate = "$" + Math.floor(((total_salary * extra) + total_salary) / billable_hours);
//rate = total salary + profit, / billable hours.
// If the result is a finite number, the user's input was good
if (isNaN(rate)) {
required_rate.innerHTML = rate;
}
else{
required_rate.innerHTML = "";
}
}
【问题讨论】：
-
隔离您遇到的问题，不要将所有代码都放入问题中。
-
好点。我只是不确定看到什么有帮助，所以由于代码很短，我将其全部发布。
标签： javascript forms calculator nan