0

このサイトに投稿するのはこれが初めてです。販売しようとしている製品の 1 つを概説する Web ページがあります

ここに私のジレンマがあります。ユーザーに、必要なアイテムの数量の + および - ボタンを押すように求めるこのコードがあります。今私が解決しようとしているのは、ユーザーが + または - を何度も押した場合、クリック数を考慮して別の行で注文の合計金額を計算できるようにする必要があることです。私はjavascriptに非常に慣れていないので、すべての助けに感謝します

 <form>
   <br> Item Price: $463.50
   <br> Please Select Quantity
   <input type='button' name='subtract' onclick='javascript:   document.getElementById("qty").value--;' value='-'/>
   <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
   <input type='text' name='qty' id='qty' />
   </form>
4

3 に答える 3

1

Javascript コードを独自の <script> 要素に分離し、次のようにします。

<form>
   <br/> Item Price: $<span id="price">463.50</span>
   <br/> Please Select Quantity
   <input type="button" name="subtract" id="subtract" value="-"></input>
   <input type="button" name="add" id="add" value="+"></input>
   <input type="text" name="qty" id="qty" value="0"></input>
   <br/> Total 
   <input type="text" name="total" id="total" value="0"></input>
</form>

Javascript は次のようになります。

$(function() {

   var price = parseFloat($('#price').text());

   $('#subtract').on("click",function() {
       var $qty = $('#qty');
       var current = parseInt($qty.val());
       if ( current > 0 ) {
           $qty.val(current-1);
           $('#total').val(price*(current-1));
       } else {
           $('#total').val(0);
       }
   });

   $('#add').on("click",function() {
       var $qty = $('#qty');
       var current = parseInt($qty.val());
       $qty.val(current+1);
       $('#total').val(price*(current+1));
   });

});

実際に見ることができます。

これはすべて jQuery がなくても実行できますが、作業がずっと楽になります!

あなたはこれが初めてだと言ったので、警告の言葉: 実際のアプリでは、ページからの数量のみを使用し、バックエンドでそれらに請求する金額を再計算します. 誰かが DOM で価格または合計を変更するのは非常に簡単です。DOM からの価格または合計を使用すると、悪意のあるユーザーが任意の価格で購入する可能性があります。入力が悪意があるか、間違っていると常に想定してください。

于 2013-08-23T05:14:15.250 に答える
1 
<form>
<br> Item Price: $<span id='price'>463.50</span>


    var unitprice = (document.getElementById('price').innerText || document.getElementById('price').textContent);
    var price = parseFloat(unitprice);
    var count = parseInt(document.getElementById("qty").value, 10)
    var total = price * count;
    alert(total); // or do whatever you want
于 2013-08-23T05:17:09.473 に答える
0 
var value = parseInt(document.getElementById("qty").value, 10)

item_price = item_price * value;

document.getElementById("someid").innertHTML = item_price;
于 2013-08-23T04:50:19.397 に答える