Angular2/JavaScript - Increment/Decrement by 1 on (click)

Question

I want to Increment/Decrement when the user presses the add button, then update the amount value accordingly. I've tried a couple of times, but unfortunately I was not successful!

Here is the code:

  addToCart(){
  this.amount = 1;
  }

  addItem(){
    this.amount++;
    console.log('plus is : '+this.amount++)
  }

  removeItem(){
   this.amount--;
   console.log('plus is : '+this.amount--)
  }

HTML:

   <div (click)="addToCart()">ADD</div>
   <div (click)="removeItem()" class="btnSign">-</div> 
   <div>{{amount}}</div> 
   <div (click)="addItem()" class="btnSign">+</div>

Is your JS code in a controller? How is your controller being included in your view? — Anthony E
– Anthony E, Commented May 7, 2016 at 23:46
Btw, even if the current code worked, it would always increment/decrement the amount by 2, since you're using post-increment (the ++) before console.log and also within the console.log statement. — Marko Gresak
– Marko Gresak, Commented May 8, 2016 at 0:17

KB_ · Accepted Answer · 2016-05-08 14:22:09Z

1

The mistake was in using ++

export class HelloWorld {
public amount:number;

addToCart(){
this.amount = 1;
}

addItem(){
this.amount=this.amount+1;
console.log('plus is : '+this.amount)
}

removeItem(){
this.amount=this.amount-1;
console.log('plus is : '+this.amount)
}


}

here is the plunker

answered May 8, 2016 at 14:22

KB_

2,1232 gold badges26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Folky.H Over a year ago

Your solution does not work if we have duplicate buttons... it will keep incrementing/decrementing all the other buttons together

Collectives™ on Stack Overflow

Angular2/JavaScript - Increment/Decrement by 1 on (click)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related