Расчеты - Javascript - Общая площадь квадратных футов, разделенная на квадратные футы, и Годовая арендная плата, разделенная на квадратные футы

Я пытаюсь выполнить несколько расчетов. Один из них делит годовую арендную плату на квадратные футы. Это работает, если вы не добавите запятую или знак доллара. Я также хотел бы, чтобы поле арендной платы / кв. Футы вообще ничего не отображало вместо Nan, если в полях ничего не заполнено. Второе поле дает процент (% 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 ответ

Есть несколько проблем с вашим сценарием, если их устранить, вы можете упростить отладку и управление сценарием и сделать его менее подверженным ошибкам.

  1. Вы смешиваете конкатенацию строк с числовыми вычислениями. Вместо этого преобразуйте все свои значения в числовые значения, вычислите, затем объедините и отформатируйте. Сохраняйте вычисления в числовой форме и форматируйте только тогда, когда вы готовы к отображению.

  2. Упростите ваши функции, так что это будет делать только одно: преобразовать форматированное "число" в числовое значение ИЛИ преобразовать числовое значение в форматированную строку. Refactor formatNumber сделать только одну вещь и сделать вторую функцию, чтобы сделать другую (например, formatNumber() → formatNumber() а также convertToNumeric())

пример

// 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 = "";
}
Источник
Другие вопросы по тегам