My cart increment and decrement button is not working properly

I don’t know why my increment button not working as i wanted.
this is the code

function increment() {
    var increBtn = document.getElementsByClassName('increBtn')
    for(var i = 0; i < increBtn.length ; i++){
      increBtn[i].addEventListener('click', function(event) {   
        var buttonClicked =event.target
        var input = buttonClicked.parentElement.children[1]
        inputValue = input.value
        var newValue = parseInt(inputValue) + 1
        input.value = newValue
       })
    } 
  }

If I want to increase the the cart items the first one will increase base on the number of items in the cart, the remain button will also increased base on the number of items that is below it in the cart . The last button in the cart works normal
Screenshot (39)

If you have it working in some cases but not in others, then I recommend looking for differences in the HTML or for spelling mistakes in the class name increBtn.

Tip: You can use Firefox or Chrome devtools to view the event listeners on specific HTML elements. That will allow you know that your event is properly setup on the button.

Is working for all button but it behavior is not normal, like in the picture above the first one increase by 3 when i clicked the button, the second one increases by 2 once i clicked the button, while the last button is ok it increases only by 1

How are the rows of items being added to your table? Are you doing anything to prevent adding the same ‘click’ handler multiple times to the same button? I’m guessing that you’ve added multiple event listeners to the ones that are incrementing incorrectly. When you add a new item to the cart, you may be adding duplicate event listeners to the other cart items.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.