CODEWITHSUNDEEP
javascriptjquery
JDawwgy
JDawwgy

Reputation: 928

Why does my first click on the + button not increase the value of the input?

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 class="service-option-card" data-monthly="10">                             
  <div class="quantity">
    <button class="btn btn-quantity dec">-</button>
      <input class="quantity-input quantity" value="1">
    <button class="btn btn-quantity inc">+</button>
  </div>
</div>

Upvotes: 0

Views: 85

Answers (3)

Kelechi Igbonekwu
Kelechi Igbonekwu

Reputation: 91

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 picking the div which evaluates its value to 0 because value doesn't exist for the div tag. On the first click, the zero evaluates to 1 which also is the value in your input tag, hence it doesnt seem to have a visual effect. 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);
}

Upvotes: 2

ThS
ThS

Reputation: 4783

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 class="service-option-card" data-monthly="10">                             
  <div class="quantity">
    <button class="btn btn-quantity dec">-</button>
      <input class="quantity-input quantity" value="1">
    <button class="btn btn-quantity inc">+</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 happily provide further help if needed).

Upvotes: 3

user19998326
user19998326

Reputation:

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

Upvotes: 0

Related Questions