计算 - Javascript - 平方英尺总计除以平方英尺和年租金除以平方英尺

时间:2013-06-03 21:49:57

标签: javascript html percentage

我正在尝试进行多次计算。其中一个人将年租金除以平方英尺。除非您添加逗号或美元符号,否则此方法有效。如果字段中没有填充内容,我也希望租金/平方英尺字段显示任何内容而不显示任何内容。第二个字段通过将总平方英尺除以平方英尺来给出百分比(%NRA)。如果字段中没有任何内容,我还希望保持空白。任何帮助将不胜感激!

 <html>

 <head>
 <title></title>

 <body>

<form method="POST" action>


<table border="0" width="640">

  <tr>
    <td width="169"><font face="Arial" size="2">Total Square Feet:</font></td>
    <td width="136"><font size="2" face="Arial">
    <input type="text" name="SF" id="TotalSF" OnChange="calcNRA1();" size="18" tabindex="530"></font></td>
  </tr>
  </table>
&nbsp;
&nbsp;
<table border="1" height="167">
  <tr>
    <td width="82" align="center" height="16"><font face="Arial" size="2">Sq.
      Ft.</font></td>
    <td width="61" align="center" height="16"><font face="Arial" size="2">%
      NRA:</font></td>
    <td align="center" height="16" style="width: 106px"><font face="Arial" size="2">Annual
      Rent</font></td>
    <td align="center" height="16" style="width: 129px"><font face="Arial" size="2">&nbsp;
      Rent/Sq. Ft.</font></td>
  </tr>
  <tr>
    <td width="82" align="center" style="height: 23px"><font face="Arial" size="2">
    <input type="text" name="SF_Tenant1" id="sqft1" OnFocus="calcRentSQFTOne()" OnKeyUp="calcRentSQFTOne()"  OnChange="calcNRA1()" size="10" tabindex="602" class="style4"></font></td>
    <td width="61" align="center" style="height: 23px"><font face="Arial" size="2">
    <input type="text" name="PercNRA_Tenant1" id="NRA1" size="7" tabindex="603"></font></td>
    <td style="height: 23px; width: 106px;" class="style5"><font face="Arial" size="2">
    <strong><font size="2">$ </font></strong>
    <!--webbot bot="Validation" s-data-type="Number" s-number-separators=",." --><input type="text" name="AnnualRent_Tenant1" id="annualrent1" OnFocus="calcRentSQFTOne()" onblur="this.value = '$' + formatNumber(this.value, 0, 0, true)"  OnKeyUp="calcRentSQFTOne()" size="11" tabindex="604"></font></td>
    <td style="height: 23px; width: 129px;" class="style7"><font face="Arial" size="2">
    <strong><font size="2">$ </font></strong>
    <!--webbot bot="Validation" s-data-type="Number" s-number-separators=",." --><input type="integer" name="RentSF_Tenant1" id="rentsqft1"  OnFocus="calcRentSQFTOne()"   onblur="this.value = '$' + formatNumber(this.value, 0, 0, true)" readonly="readonly" size="11" tabindex="605"></font></td>
  </tr>
  </table>
&nbsp;

<p><font face="Arial" size="2">
 <input type="submit" value="Save" name="Save" tabindex="999" style="font-family: Arial; font-size: 10pt; width: 65px; height: 29px;"></font></p>
 </form>
 <script type="text/javascript">
 function calcRentSQFTOne(){
    SquareFeet1 = document.getElementById("sqft1").value;
    AnnualRent1 = document.getElementById("annualrent1").value;

    document.getElementById("rentsqft1").value = 
                    (AnnualRent1 * 1) 
                                          / (SquareFeet1 * 1);


 }


 //

 function formatNumber(number, digits, decimalPlaces, withCommas)
 {
    number       = number.toString();
var simpleNumber = '';

// Strips out the dollar sign and commas.
for (var i = 0; i < number.length; ++i)
{
    if ("0123456789.".indexOf(number.charAt(i)) >= 0)
        simpleNumber += number.charAt(i);
}

number = parseFloat(simpleNumber);

if (isNaN(number))      number     = 0;
if (withCommas == null) withCommas = false;
if (digits     == 0)    digits     = 1;

var integerPart = (decimalPlaces > 0 ? Math.floor(number) : Math.round(number));
var string      = "";

for (var i = 0; i < digits || integerPart > 0; ++i)
{
    // Insert a comma every three digits.
    if (withCommas && string.match(/^\d\d\d/))
        string = "," + string;

    string      = (integerPart % 10) + string;
    integerPart = Math.floor(integerPart / 10);
}

if (decimalPlaces > 0)
{
    number -= Math.floor(number);
    number *= Math.pow(10, decimalPlaces);

    string += "." + formatNumber(number, decimalPlaces, 0);
 }

 return Math.round(input*100)/100 + "$";

 }





 function calcNRA1(){
    SquareFeet1 = document.getElementById("sqft1").value;
    TSF = document.getElementById("TotalSF").value;

    document.getElementById("NRA1").value = 
                    (SquareFeet1 * 1)/(TSF * 1) * 100
                                            + "%" ;                                

 }


 </script>

 </body>

 </html>

1 个答案:

答案 0 :(得分:0)

如果解决了脚本问题,可以使脚本更容易调试和管理,并使其更不容易出错。

  1. 您将字符串连接与数值计算混合在一起。而是将所有值转换为数值,计算,然后连接和格式化。以数字形式存储计算,仅在您准备好显示时进行格式化。

  2. 简化您的功能,使其只做一件事:将格式化的“数字”转换为数字值或将数值转换为格式化的字符串。重构formatNumber仅执行一项操作并执行第二项功能(例如formatNumber()formatNumber()convertToNumeric()

  3. 实施例

    // convert to numeric type, default to 0 if empty(?)
    var SquareFeet1 = convertToNumeric(document.getElementById("sqft1").value);
    var TSF = convertToNumeric(document.getElementById("TotalSF").value);
    
    // calculate and store as numeric values
    var nra = SquareFeet1 / TSF * 100;
    
    // format and concatenate for display
    var nraInput = document.getElementById("NRA1");
    if (nra > 0) {
        nraInput.value = formatNumber(nra) + "%" ;
    }
    else {
        nraInput.value = "";
    }