个人中心
gpt4 book ai didi

Javascript 表单计算返回 NaN 直到最后一个条目

转载 作者：行者123 更新时间：2023-11-28 13:31:13 25 4
gpt4 key购买 nike

JavaScript 新手。

我正在尝试创建一个简单的计算器，其显示值会随着用户输入更多信息而动态更新。我的问题:绿色圆圈中显示的“比率”始终显示为“NaN”，直到用户输入最终表单值(所有值)。

我尝试使用 .value、parseFloat 等。如果有任何建议或更正，我将不胜感激——我知道 JS 不是很优雅(而且也不能很好地工作)。

JSFiddle 在这里: http://jsfiddle.net/thinkhuman/8ftuw/

谢谢!

更新:海报解决了下面的 NaN 问题，但问题的另一半是:当关联成本 (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 = "";
    }
}

最佳答案

在您的情况下，您将得到一个字符串，$NaN正如您所做的那样

var rate = "$" + Math.floor(((total_sala ...

看看如何添加美元符号使其成为一个字符串，这不是 NaN，它是一个字符串

删除美元符号

var rate = Math.floor(((total_sala ...

然后执行(请注意，代码中的条件是错误的)

if (isNaN(rate)) {
    required_rate.innerHTML = "";
} else {
    required_rate.innerHTML = '$' + rate;
}

比较条件中的实际数字，然后添加美元符号

FIDDLE

关于Javascript 表单计算返回 NaN 直到最后一个条目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24703386/

25 4 0
文章推荐： html - 在可变高度 td 中对齐 div 顶部/底部
文章推荐： JavaScript - 将日期字符串 yyyyMMddHHmmss 转换为日期对象 yyyy-MM-dd HH :mm:ss
文章推荐： javascript - 使用对象作为数组索引有什么缺点(如果有的话)？
文章推荐： javascript - 我该如何修复这个正则表达式函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com