ページロード時に価格フィールドを更新

Question

ロードページで関数をアクティブにしようとしていますが、この関数は "input＃quantity"で数値を取得し、ページロード時に "input.final-price"を計算します関数currentPrice。しかし、ページの読み込み時には、ページの読み込み時にフィールドを更新していません。

function currentPrice() { 
 
    var priceProduct = parseFloat($.trim($('span.price').html().replace(",", "").replace("$", ""))); \t 
 
    var convertion = ((priceProduct)/100).toFixed(2); 
 
    var price = parseFloat($("input#quantity").val()); 
 
    var total = ((convertion) * (price)).toFixed(2); 
 
    $("input.final-price").val(total); 
 
    } 
 
// Onload 
 
$(document).on("load", "input", currentPrice);

Answer 1

文書はその後、$（ドキュメント）.ready（のための速記である上記

$(function(){ 
    currentPrice(); 
}); 

あなたの関数を実行するロードまで、あなたは待つ必要があります）

Answer 2

私は」あなたのマークアップに関するいくつかの仮定をしました（下記のデモを参照）。 参照がクラスではなくID（#final-price）になっていることに注意してください（これにより、関連する<label>のバインディングが簡単になります）。

また、新しい数量が入力された場合、最終価格（読み取り専用）を更新したままにしておきたいと思っています。

function currentPrice() { 
 
    var priceProduct = parseFloat($.trim($('span.price').html().replace(",", "").replace("$", ""))); 
 
    var convertion = ((priceProduct)/100).toFixed(2); 
 
    var price = parseFloat($("#quantity").val()); 
 
    var total = ((convertion) * (price)).toFixed(2); 
 
    $("#final-price").val(total); 
 
} 
 

 
$(function() { 
 
    // initialise final figure 
 
    currentPrice(); 
 
    
 
    // ensure total is updated each time quantity is changed 
 
    $("#quantity").on("keyup", currentPrice); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="price">$38,000</span> 
 

 
<label for="quantity">Quantity</label> 
 
<input id="quantity" value="5" /> 
 

 
<label for="final-price">Final</label> 
 
<input id="final-price" readonly />