顧客が自分のアカウントにクレジットを追加できる簡単な計算機を作成しています。以下のエラー以外はすべて機能しています。
エラー: 値を入力するとすべて問題ありません。クリックしてからもう一度クリックして値を編集して削除すると、NaN が表示されます。NaN を表示するのではなく、デフォルトで 0.00 にします。
私はこれをまとめただけなので、自由にJSを見て、できるところを最適化してください。
HTML:
Credit:
<span id="price01" class="price">£1000.00</span><br/>
Add: <input type="text" id="pricetoadd" placeholder="0.00" name="price02" class="price">
Total: <span class="total"></span>
JS:
$.fn.sumValues = function() {
var sum = 0;
this.each(function() {
if ( $(this).is(':input') ) {
var val = $(this).val();
} else {
var val = $(this).text();
}
sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
});
return sum;
};
$(document).ready(function() {
$('#pricetoadd').blur(function(){
var num = parseFloat($(this).val());
var cleanNum = num.toFixed(2);
$(this).val(cleanNum);
if(num < 1){
$('#error').text('Please enter only 2 decimal places, we have truncated extra points');
}
});
$('input.price').bind('keyup', function() {
$('span.total').html( $('.price').sumValues().toFixed(2) );
});
});