javascript - 数量と製品価格に基づいて、合計価格更新

Question

私のHTML構造：

<div class="pricesection">
        <label id="productPrice">
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        </label>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

私のJSコード:

$('#quantity').keyup(function(){
  $('#quantity').each(function () {  
  var qty = $('#quantity').val();
  var price = $('#totalprice').val();
  var total = price * qty;
  });

  $('#totalprice').html(total);
});

私は多くの例を見つけましたが、適切ではありません。:-(

数量を入力すると、商品価格が自動的に更新されます。「0」、文字、「空」の場合、またはキャンセル後は元の価格に戻す必要があります。

私はいつも「0」の値を返します！

どんな助けにもとても感謝しています！

Answer 1

にループがあるのはなぜ#quantityですか? あなたはそれを必要としません。次のコードを試してください。

$('#quantity').keyup(function () {
    var qty = $('#quantity').val();
    var price = parseInt($('#totalprice').text());
    var total = price * qty;
    $('#totalprice').html(total);
});

通知parseInt($('#totalprice').text()); .val()はスパンでは機能しないため.text()、結果を使用して int で解析する必要があります

Answer 2

   var price = $('#totalprice').val();//this is wrong!!!

スパンを取得 htmlします。値ではありません

var price = $('#totalprice').text();//this is the correct syntax

したがって、コードは次のようになります--:

  $('#quantity').keyup(function () {
        var qty = $('#quantity').val();
        var price = parseInt($('#totalprice').text()); //or $('#totalprice').html()
        var total = price * qty;
        $('#totalprice').html(total);
    });

Answer 3

これを試してください........HTML

<div class="pricesection">
        <input type="text" id="productPrice"/>
        <strong>
        <span id="totalprice"> 129,00</span>
        <span>$</span>
        </strong>
        <input type="text" value="1" name="am" id="quantity">
        <button class="submitbtn" type="submit">add to Cart</button>
</div>

……JS…………

$('#quantity').keyup(function(){
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;

  $('#totalprice').html(total);
});