CODEWITHSUNDEEP
javascript
Ajmal Joiya
Ajmal Joiya

Reputation: 13

How to change quantity with plus minus buttons with plain Javascript

let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');

   plus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
           qty_inputs.forEach(qty=>{
                    qty.value++
           })
       })
    })
    minus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
            qty_inputs.forEach(qty=>{
                if(qty.value > 1){
                    qty.value--
                 }
                  else{
                     qty.value=0;
                 }
            })
        })
    })
<div class="cart-totals">
        <input type="button" value="-" id="minus-button" for="quantity">
        <input type="number" id="quantity" value="1" min="0">
        <input type="button" value="+" id="plus-button" for="quantity">

        <input type="button" value="-" id="minus-button" for="quantity">
        <input type="number" id="quantity" value="1" min="0">
        <input type="button" value="+" id="plus-button" for="quantity">
    </div>

How I can change value of specific quantity input ??? In my case click event triggers all inputs and change the value of each input. Please guide me thanks.

Upvotes: 0

Views: 2984

Answers (3)

KooiInc
KooiInc

Reputation: 122906

Use event delegation for a single generic document wide handler. Afaik for is not a valid attribute for input type 'button', so use a data-attribute. Furthermore: element id must be unique. Fixed all that in this demo snippet:

document.addEventListener("click", handle);

function handle(evt) {
   if (evt.target.type === "button") {
    return handleBtn(evt.target);
  }
}

function handleBtn(btn) {
  const elem = document.querySelector(`#${btn.dataset.for}`);
  const nwValue = +elem.value + (btn.value === "-" ? -1 : 1);
  elem.value = nwValue >= +elem.min ? nwValue : elem.min;
}
<div class="cart-totals">
  <input type="button" value="-" data-for="quantity1">
  <input type="number" id="quantity1" value="1" min="0">
  <input type="button" value="+" data-for="quantity1">

  <input type="button" value="-" data-for="quantity2">
  <input type="number" id="quantity2" value="1" min="1">
  <input type="button" value="+" data-for="quantity2">
</div>

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Using a single event handler:

var cart = document.querySelector('.cart-totals');

cart.addEventListener('click', function(ev) {

  var tgt = ev.target;
  if (tgt.matches('input[type="button"]')) {
  
     var input = document.getElementById(tgt.dataset.for);
     var currentValue = +input.value;
     var minValue = +input.min;
     
     
     if (tgt.value === '+') {
        input.value = currentValue + 1;
     }
     else if (currentValue > minValue) {
        input.value = currentValue - 1;
     }
    
  }
});
<div class="cart-totals">
        <input type="button" value="-"  data-for="quantity1">
        <input type="number" id="quantity1" value="1" min="0">
        <input type="button" value="+" data-for="quantity1">

        <input type="button" value="-" data-for="quantity2">
        <input type="number" id="quantity2" value="5" min="2">
        <input type="button" value="+" data-for="quantity2">
    </div>

Upvotes: 0

Nir Tzezana
Nir Tzezana

Reputation: 2342

This should do the trick.

let plus_btns = document.querySelectorAll('#plus-button');
let minus_btns = document.querySelectorAll('#minus-button');
let qty_inputs = document.querySelectorAll('#quantity');

   plus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
           btn.previousElementSibling.value++;
       })
    })
    minus_btns.forEach(btn=>{
       btn.addEventListener('click', ()=>{
            btn.nextElementSibling.value = (btn.nextElementSibling.value == 0) ? 0 : btn.nextElementSibling.value - 1;
        })
    })

Upvotes: 3

Related Questions