javascript - 使用 Javascript 计算表单字段——得到 NaN 结果

Question

我创建了一个简短的表单，应该根据用户输入计算值。我已经弄清楚了大部分内容，但似乎无法将结果显示在总计字段中。相反，我得到 NaN。

我正在尝试使用 parseInt 但还没有任何运气。

这是我到目前为止所拥有的:

Javascript:

 var AdPrice = document.getElementsByTagName('input') = 0;
  var ColorCharge = document.getElementsByTagName('input') = 0;
  var WebAd = document.getElementsByTagName('input') = 0;
  var AdSubtotal = 0;
  var DownPayment = document.getElementsByTagName('input') = 0;
  var TotalPrice = 0;
  var Payments = document.getElementsByTagName('input') = 0;
  var TotalPayment = 0; 

function updateTotal()
{
  var subtotal = AdPrice + ColorCharge + WebAd;
  var total = subtotal - DownPayment;
  var totalmonthlypayment = total / Payments;

 parseFloat(document.getElementById('AdSubtotal').value = subtotal);
 parseFloat(document.getElementById('TotalPrice').value = total);
 parseFloat(document.getElementById('Payment').value = totalmonthlypayment);


}

HTML:

<fieldset>
              <legend>Payment Details</legend>

             Ad Charge $

              <input type="text" name="AdPrice" id="AdPrice" class="medium" onChange="updateTotal()" /><br />

              Color Charge +

              <input type="text" name="ColorCharge" id="ColorCharge" class="medium" onChange="updateTotal()" /><br />

              Web Ad +
              <input type="text" name="WebAd" id="WebAd" class="medium" onChange="updateTotal()" /><br />

              Subtotal =

              <input type="text" name="AdSubtotal" id="AdSubtotal" readonly class="medium"  /><br />

           Down Payment -

           <input type="text" name="DownPayment" id="DownPayment" class="medium" onChange="updateTotal()" /><br />

           Total = 
           <input type="text" name="TotalPrice" id="TotalPrice" readonly class="medium"  /><br /><br />



           # Consec. Payments \

             <input type="text" name="Payments" id="Payments" class="medium" onChange="updateTotal" /><br />

            Amt Each Payment $ 

            <input type="text" name="Payment" id="Payment" class="medium" readonly  /><br /><br />

            <input type="checkbox" name="ProratedCheck" id="ProratedCheck" /> <span style="margin-right:10px;">Prorated/Length</span><input type="text" name="ProratedLength" id="ProratedLength" />
</fieldset>           

我也有一个 fiddle :

http://jsfiddle.net/kjetterman/eHQV4/10/

Answer 1

您需要处理的 JavaScript 存在几个错误，正如您的问题的评论中提到的，您应该使用 getElementById 来检索 DOM 元素，您遇到的其他问题是您的代码是浏览器收到响应后立即运行，此时 DOM 可能尚未准备好工作，因此所有引用都将返回 NULL。这是工作版本，您仍然需要在初始值为零时添加一些验证，这样您就不会得到 NaN 作为运算结果。

http://jsfiddle.net/Wy7kE/2/