How to create a total using plus minus buttons and input box
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>
1 answers
solution1
1 ACCPTED 2019-01-09 21:55:33
- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.