I made a quick script that will update the number in the <input> field between the 2 buttons, but when I click the button initially it doesn't work, after the first press it begins working as expected from the 2nd click and for the rest of the clicks. Clicking the - button first works as expected.

// click   button
$(".inc").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity 1;

  setNewQuantity(newQuantity, service);
  updatePrice(newQuantity, service);
});

// click - button
$(".dec").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity-1;

  if(newQuantity <= 0) {
    let newQuantity = 0
    setNewQuantity(newQuantity, service);
  } else {
    setNewQuantity(newQuantity, service);
  }

  updatePrice(newQuantity, $(this).closest(".service-option-card"));
});

// Get current number
function getCurrentQuantity(service) {
  let quantity_str = service.find(".quantity").val();
  quantity_num = Number(quantity_str);
  return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
  service.find(".quantity").val(quantity);
}

// Update Price
function updatePrice(quantity, service) {
  var price = parseInt(service.find(".price").val().replace(/,/g, ""));
  var total = quantity * price;

  if(total < 0) {
    total = 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div  data-monthly="10">                             
  <div >
    <button >-</button>
      <input  value="1">
    <button > </button>
  </div>
</div>

CodePudding user response：

Its breaking because your input element has a class .quantity which is also a class on a div element. The find method in the functions setNewQuantity() and getCurrentQuantity() are pickind the div which evaluates its value to 0 because value doesn't exist for the div tag. change your functions to

// Get current number
function getCurrentQuantity(service) {
    console.log({service})
    let quantity_str = service.find("input.quantity").val();
    console.log({quantity_str})
    quantity_num = Number(quantity_str);
    return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
    service.find("input.quantity").val(quantity);
}

CodePudding user response：

I think it's because you're using Number() in your getCurrentQuantity() function.

CodePudding user response：

The main reason here is that you're using the class .quantity to get the input's value that happens to be also set to the input's parent div so when let quantity_str = service.find(".quantity").val() is executed, precisely the find method that is called on service, the div with class .service-option-card which is the parent of both the div.quantity and input.quantity, then find method will match both the the div and the input thus you won't get the input's value as expected.

There are many fixes, a quick solution is to prefix the .quanity selector with input (becomes input.quantity) to only target the input and thus you get the expected result.

Here's a demo with the fix applied:

// click   button
$(".inc").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity 1;

  setNewQuantity(newQuantity, service);
  updatePrice(newQuantity, service);
});

// click - button
$(".dec").click(function(){
  service = $(this).closest(".service-option-card");
  let quantity = getCurrentQuantity(service);
  let newQuantity = quantity-1;

  if(newQuantity <= 0) {
    let newQuantity = 0
    setNewQuantity(newQuantity, service);
  } else {
    setNewQuantity(newQuantity, service);
  }

  updatePrice(newQuantity, $(this).closest(".service-option-card"));
});

// Get current number
function getCurrentQuantity(service) {
  let quantity_str = service.find("input.quantity").val();
  quantity_num = Number(quantity_str);
  return quantity_num;
}

// Set new Number
function setNewQuantity(quantity, service) {
  service.find("input.quantity").val(quantity);
}

// Update Price
function updatePrice(quantity, service) {
  var price = parseInt(service.find(".price").val().replace(/,/g, ""));
  var total = quantity * price;

  if(total < 0) {
    total = 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div  data-monthly="10">                             
  <div >
    <button >-</button>
      <input  value="1">
    <button > </button>
  </div>
</div>

The line var price = parseInt(service.find(".price").val().replace(/,/g, "")) throws an error because your HTML doesn't have an element having the price class which leads to trying to execute replace method on undefined.

Anyway, I just wanted to warn you about that, the fix is out of the scope of my answer (though I'll. gladly provide further help if needed).