总价计算器逻辑难度

Question

I have two number inputs, what I want to do is to get dynamially the total price. The problem is that when I decrease the number its still adding and doesn't work correctly. Actually my brain cannot imagine any way to code it correctly. Could someone give me any clue please?

<input type="number" name="open" id='open' min="0" max="20"> 
<input type="number" name="vip"  id='vip' min="0" max="20"> 
<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<script>
  var vipPrice = 290;
  var openPrice = 80;
  var totalPrice = 0
  $('#open').on("change", function() {
    totalPrice = totalPrice + ($("#open").val() * openPrice);
    $("#doZaplaty").html(totalPrice);
  });

  $('#vip').on("change", function() {
    totalPrice = totalPrice + ($("#vip").val() * vipPrice);
    $("#doZaplaty").html(totalPrice);
  });
</script>

Answer 1

Because totalPrice = totalPrice + ($("#open").val() * openPrice); will add up previous result, as I commented.

However, you have 2 different total to take into account, so it's not easy to keep the state with only one total, because you need to subtract the previous result ,or calculate the change from previous value.

Instead, you can have 2 different total, like openTotal for result on #open and vipTotal on result for #vip , then you can use openTotal = ($("#open").val() * openPrice); to get the current state. And when you need to output the result, use $("#doZaplaty").html(openTotal + vipTotal); to show the final total.

 var vipPrice = 290; var openPrice = 80; var openTotal = 0; var vipTotal = 0; $('#open').on("change", function() { // As the totals are separated, we just need to get its current values computed. openTotal = ($("#open").val() * openPrice); $("#doZaplaty").html(openTotal + vipTotal); }); $('#vip').on("change", function() { vipTotal = ($("#vip").val() * vipPrice); $("#doZaplaty").html(openTotal + vipTotal); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Total Price: <span id='doZaplaty'>0</span> EURO</p> <input type="number" name="open" id='open' min="0" max="20"> <input type="number" name="vip" id='vip' min="0" max="20"> 

Answer 2

Because you always add to totalPrice. Try this instead (untested):

    <script>
        var totalPrice = 0
        function GetTotalPrice(vipNum,openNum){
            var vipPrice = 290;
            var openPrice = 80;
            var total = vipNum * vipPrice + openNum * openPrice;
            return total;
        }

        $('#open').on("change", function(){
            totalPrice = GetTotalPrice($("#vip").val(),$("#open").val());
            $("#doZaplaty").html(totalPrice);
        });

        $('#vip').on("change", function(){
            totalPrice = GetTotalPrice($("#vip").val(),$("#open").val());
            $("#doZaplaty").html(totalPrice);
        });
    </script>

Answer 3

Please tyr by this simple way

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<input type="number" name="open" id='open' min="0" max="20"> 
<input type="number" name="vip"  id='vip' min="0" max="20"> 

Set 2 hidden fields to store temp calculation value

<input type="hidden" name="totalPriceopenTemp" id='totalPriceopenTemp' value="0"> 
<input type="hidden" name="totalPricevipTemp"  id='totalPricevipTemp' value="0"> 

<p> Total Price: <span id='doZaplaty'>0</span> EURO</p>
<script>
  var vipPrice = 290;
  var openPrice = 80;
  var totalPrice = 0;
  var totalPriceopenTemp = 0;
  var totalPricevipTemp = 0;

  $('#open').on("change", function() {
    totalPriceopenTemp = ($("#open").val() * openPrice);
    $("#totalPriceopenTemp").val(totalPriceopenTemp);
    totalPrice = parseInt($("#totalPriceopenTemp").val())+parseInt($("#totalPricevipTemp").val());
    $("#doZaplaty").html(totalPrice);
  });

  $('#vip').on("change", function() {
    totalPricevipTemp = ($("#vip").val() * vipPrice);
    $("#totalPricevipTemp").val(totalPricevipTemp);
    totalPrice = parseInt($("#totalPriceopenTemp").val())+parseInt($("#totalPricevipTemp").val());
    $("#doZaplaty").html(totalPrice);
  });
</script>

I think It will work for you