入力フィールドから値を取って計算し、合計を表示

Question

私は入力フィールドから値を取り、単純な計算を行い、フォーム要素への答えを表示しようとしています。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#number_ticket").change(function() { 
      var adult = parseInt($(this).val()) * parseInt($('#price_adults').textContent); 
      $('#total_price_adults').text(adult); 
     }); 
    }); 
</script> 

ここで値が既に整数であるので、私は、$（この）.val（）からのparseInt（）を削除しようとした私のHTML

<div class="st_adults_children"> 
    <span class="label">Adults</span> 
    <div class="input-number-ticket"> 
     <input type="number" name="number_ticket" value="1" min="1" 
                  max="10" placeholder="Number ticket of Adults" 
                  id="number_ticket"> 
    </div> 
    × 
    $<span class="price_adults" id="price_adults">{{$single->price}}</span> 
    = 
    <span class="total_price_adults" id="total_price_adults">$93</span> 
</div> 

です。私はここで間違っていることを解決することができませんでした。

Answer 1

あなたがた内容改善することができるいくつかの方法があります得点：

まず、JavaScriptで作業しているときに、可能な限り要素と値をルックアップしてキャッシュします。たとえば、ページが読み込まれた後にチケット価格が変更されないことがわかっている場合は、その番号を一度ルックアップしてから再利用することができます。基本的に、必要がない場合は、イベントハンドラ内の要素や値を見つけるためにDOMに行くべきではありません。

2番目のヒント - 単純なCSSを使用して価格をフォーマットすると、要素がストレートな値になり、 '$ x.xx'と 'x'の間を前後に動かす心配はありません.xx '。

第3に、セントを含むことができるので、おそらくparseIntの通貨での通貨を希望しません。 parseFloatはあなたのセントを保持しますが、値を制御できる場合は必要ではありません。

この（fiddle）

HTML試してみてください：

<div class="st_adults_children"> 
    <span class="label">Adults</span> 
    <span class="input-number-ticket"> 
     <input type="number" name="number_ticket" value="1" min="1" max="10" placeholder="Number ticket of Adults" id="number_ticket"> 
    </span> 
    × 
    <span class="price price_adults" id="price_adults">10</span> 
    = 
    <span class="price total_price_adults" id="total_price_adults"></span> 
</div> 

JSを

//Cache the elements you're interested in 
var ticketPrice = $('#price_adults').html(), 
     totalElement = $('#total_price_adults'), 
    quantityInput = $('input[name=number_ticket]'); 

//Watch change as well as click/keyup (improves the responsiveness of the number input controls) 
quantityInput.on('change click keyup', function() { 
    totalElement.html(quantityInput.val() * ticketPrice); 
}); 

//Initialise on ready 
quantityInput.trigger('change'); 

CSS：

は

.price::before { 
    content: '$'; 
} 

Answer 2

問題は$('#price_adults').textContentです。 jQueryオブジェクトにはtextContentというプロパティはありません。DOMノードではそのように扱います。

jQueryの方法は.text()です：

var adult = parseInt($(this).val()) * parseInt($('#price_adults').text()); 

あなたがtextContentを使用したい場合、あなたはDOM要素にアクセスすることができます。

var adult = parseInt($(this).val()) * parseInt($('#price_adults')[0].textContent); 
//                ^^^ get the DOM node 

Answer 3

あなたは.htmlを使用することができます（）の代わりの.textの（）プロパティ。

like、parseInt（$（ '＃price_adults'）.html（））;

希望これはあなたを助けます。