0
JavaScript的新手。JavaScript表格計算返回NaN直到最後一項
我試圖創建一個簡單的計算器，顯示值隨着用戶輸入更多信息而動態更新。我的問題：在用戶輸入最終表單值（所有值）之前，綠色圓圈中顯示的「費率」始終顯示爲「NaN」。
我試過使用.value，parseFloat等。我會很感激任何建議或更正 - 我知道JS不是很優雅（也不是很好）。
的jsfiddle這裏： http://jsfiddle.net/thinkhuman/8ftuw/
謝謝！
UPDATE：海報解決以下問題的NaN，但問題的另一半是：「速度」值（在綠色cirlce）當associated_costs和nonbillable值的變化不會更新。有關該部分的任何建議？
<!--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;}
... aaaand 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 = "";
}
}
隔離你遇到的問題，不要將所有的代碼都放在問題中。 – Nit
好點。我只是不確定什麼是有用的看到，所以因爲代碼的簡短，我發佈了一切。 – James