Question

Im trying to make a price calculator where 1 employee = $21 a month. There are two way I want to be able to set the quantity of employees. I would like to use a plus and minus sign to adjust the quantity as well as have an input box where they can type the quantity. Adjusting either will instantly update the total. In my attached code you will see that the typing a number into the input box works correctly but using the plus and minus sign does not adjust the total. It changes the number but the math is not executed. Does anyone have any ideas? Thank you!

var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
/*For plus and minus buttons*/
$buttonPlus.click(function(){
  $quantity.val( parseInt($quantity.val()) + 1 );
});
$buttonMin.click(function(){
  $quantity.val( parseInt($quantity.val()) - 1 );
});

/*For total*/
$(document).ready(function(){
	$(".checkout").on("keyup", ".quantity", function(){
		var price = +$(".price").data("price");
		var quantity = +$(this).val();
		$("#total").text("$" + price * quantity);
	})
})

  .checkout {
	height: 300px;
	width: 400px;
	margin: 20px auto;
	border: 2px solid black;
	text-align: center;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="checkout">
<h1 class="title">Checkout</h1>
  <p class="price" data-price="21">$21 per month</p>  
  <p class="description">Quantity:</p>  
  <button type="button" class="decrease-btn">-</button>  
  <input type="text" class="quantity" value="1"> 
  <button type="button" class="increase-btn">+</button>	  
  <p class="total">Total: <span id="total">$21</span></p>
</div>

Answer 1

Change the event to 'input' so it only fires for actual value changes
Add trigger('input') to the end of the value changes so the event is generated (logical value changes do not generate events).
Move the first bindings into the document ready for safety (optional change).
Put Math.max() around the subtraction so that the negative can not make the value go less than zero. (optional change)

/*For total*/
$(document).ready(function() {
  $(".checkout").on("input", ".quantity", function() {
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    $("#total").text("$" + price * quantity);
  })

  var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');
  
  /*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });
  
  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
  });
})

.checkout {
  height: 300px;
  width: 400px;
  margin: 20px auto;
  border: 2px solid black;
  text-align: center;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="checkout">
  <h1 class="title">Checkout</h1>
  <p class="price" data-price="21">$21 per month</p>
  <p class="description">Quantity:</p>
  <button type="button" class="decrease-btn">-</button>
  <input type="text" class="quantity" value="1">
  <button type="button" class="increase-btn">+</button>
  <p class="total">Total: <span id="total">$21</span></p>
</div>

How to create a total using plus minus buttons and input box

1 个答案: