One button unintentionally triggers another

Question

I want to modify the quantity of the selected product with 2 buttons: minus and plus. Clicking the minus button works as expected but clicking the plus button also triggers the minus buttons' click event.

Any idea why? Thank you!

  productQuantity = 1;

  constructor() { }

  ngOnInit(): void {
    this.modifyQuantity();
  }

  modifyQuantity(){
    let minusBtn = document.querySelector('#minus') as HTMLElement;
    let plusBtn = document.querySelector('#plus') as HTMLElement;

     minusBtn.onclick = () => {
        if(this.productQuantity > 1){
         this.productQuantity--;
       }
      };

     plusBtn.onclick = () => {
      this.productQuantity++;
     };
   }

Make sure your buttons are not overlapping with each other in HTML/UI as this may trigger a click event on both buttons. — Gopal Mishra, Nov 02 '20 at 10:22

score 2 · Answer 1 · answered Nov 02 '20 at 10:29

In angular it's easier with event binding

You can try this :

Component.html

<button (click)="plus"> + </button>
<button (click)="minus"> - </button>

Component.ts

productQuantity = 1;
  plus() {
   this.productQuantity++
}

minus() {
if(this.productQuantity > 1){
this.productQuantity--
}
}

Angular Event binding

score 0 · Accepted Answer · answered Nov 02 '20 at 10:23

It's hard to figure out because we can't see your HTML structure. But this is probably happening because of a concept called "event bubbling".

In short the solution would be to change your onclick function to:

(e) => {
  e.stopPropagation();
  if(this.productQuantity > 1){
    this.productQuantity--;
  }
};

This concept is explained more in depth here: https://stackoverflow.com/a/4616720/4796342

One button unintentionally triggers another

2 Answers2