javascript - PlusMinus a quantity field - Stack Overflow

I'm trying to implement addition / subtraction feature on my 4 different product modals. It has the same class names as follows.

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default btn-subtract" type="button">-</button>
    </span>
    <input type="text" class="form-control no-padding text-center item-quantity" value="1">
    <span class="input-group-btn">
         <button class="btn btn-default btn-add" type="button">+</button>
    </span>
</div>

Here's my JS.

var minus = document.querySelector("btn-subtract")
var add = document.querySelector("btn-add");
var quantityNumber = document.querySelector("item-quantity");
var currentValue = 1;

minus.addEventListener("click", function(){
    currentValue -= 1;
    quantityNumber.textContent = currentValue;
    console.log(currentValue)
});

add.addEventListener("click", function() {
    currentValue += 1;
    quantityNumber.textContent = currentValue;
    console.log(currentValue);
});

However, it's not showing anything in the input field. Any advice?

I'm trying to implement addition / subtraction feature on my 4 different product modals. It has the same class names as follows.

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default btn-subtract" type="button">-</button>
    </span>
    <input type="text" class="form-control no-padding text-center item-quantity" value="1">
    <span class="input-group-btn">
         <button class="btn btn-default btn-add" type="button">+</button>
    </span>
</div>

Here's my JS.

var minus = document.querySelector("btn-subtract")
var add = document.querySelector("btn-add");
var quantityNumber = document.querySelector("item-quantity");
var currentValue = 1;

minus.addEventListener("click", function(){
    currentValue -= 1;
    quantityNumber.textContent = currentValue;
    console.log(currentValue)
});

add.addEventListener("click", function() {
    currentValue += 1;
    quantityNumber.textContent = currentValue;
    console.log(currentValue);
});

However, it's not showing anything in the input field. Any advice?

• javascript
• html

Share Improve this question Follow edited Jun 6, 2020 at 14:52 Mahyar Mottaghi Zadeh 1,33166 gold badges2121 silver badges3333 bronze badges asked Jun 6, 2020 at 12:17 Martin KingMartin King 4711 silver badge77 bronze badges 2

• 2 None of your query selectors are correct. If you want to select by class the class name needs a . (dot) in front of it – ADyson Commented Jun 6, 2020 at 12:22
• Hi Martin, replace quantityNumber.textContent with quantityNumber.value – T. Junghans Commented Jun 6, 2020 at 12:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The problem was that your selectors were bad and you can't use textContent property on input field to change its value. Code below should do the trick:

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");
var currentValue = 1;

minus.addEventListener("click", function(){
    currentValue -= 1;
    quantityNumber.value = currentValue;
    console.log(currentValue)
});

add.addEventListener("click", function() {
    currentValue += 1;
    quantityNumber.value = currentValue;
    console.log(currentValue);
});

There are some other issues (besides incorrect element-query) here:

• to select a CSS-class use a dot before class name: e.g. .btn-minus
• to get or set the value of an input control use its value property: quantityNumber.value += 1 (even decrement/increment: e.g. quantityNumber.value++)
• if you first set the variable currentValue to (constant!) 1 and use in de-/increment then state is UI-independent. The user might initially enter 5 in the input-field then hitting the plus-button when your listener changes to 1+1=2.
• CSS-classes for referencing form-controls may work on all controls (independent of the current context). If you have product-specific quantity then the use-case might be to enter different quantities for different products/order-lines. So working with an element ID may be an alternative.
• there is already a HTML number input, which supports these operations stepUp/stepDown as well as min/max (see B in example below)
• there may be a minimum-quantity (e.g. 0) allowed: use HTML input-field's min property and/or conditionally disable minus-button

// product A
var minus_A = document.querySelector("#product_A_form .btn-subtract")
var add_A = document.querySelector("#product_A_form .btn-add");
var quantity_A = document.querySelector("#product_A_form .item-quantity");

minus_A.addEventListener("click", function(){
    quantity_A.value--;
});

add_A.addEventListener("click", function() {
    quantity_A.value++;
});

// product B
var minus_B = document.querySelector("#product_B_form .btn-subtract")
var add_B = document.querySelector("#product_B_form .btn-add");
var quantity_B = document.querySelector("#product_B_form .item-quantity");

// includes button minus disablement if at minimum or below
const minimum = 0;

minus_B.addEventListener("click", function(){
    if (quantity_B.value <= minimum) {
      minus_B.disabled = true;
      return; // return to avoid decrementing
    } else {
      minus_B.disabled = false;
    }
    quantity_B.value--;
});

add_B.addEventListener("click", function() {
    if (quantity_B.value > minimum) {
      minus_B.disabled = false;
    }
    quantity_B.value++;
});

<!-- product A -->
<div id="product_A_form" class="input-group">
  A
  <span class="input-group-btn">
    <button class="btn btn-default btn-subtract" type="button">-</button>
  </span>

  <input id="product_A_qty" type="text" class="form-control no-padding text-center item-quantity" value="1">

  <span class="input-group-btn">
    <button class="btn btn-default btn-add" type="button">+</button>
  </span>
</div>

<!-- product B -->
<div id="product_B_form" class="input-group">
  B
  <span class="input-group-btn">
    <button class="btn btn-default btn-subtract" type="button">-</button>
  </span>

  <input type="number" class="form-control no-padding text-center item-quantity" min="0" value="1">

  <span class="input-group-btn">
    <button class="btn btn-default btn-add" type="button">+</button>
  </span>
</div>

Incorrect queries. You miss '.'

var minus = document.querySelector(".btn-subtract")
var add = document.querySelector(".btn-add");
var quantityNumber = document.querySelector(".item-quantity");