How to count in jquery, adding and subtracting numbers

Question

I have this little script. I need to add and remove elements at my shop basket. So i have a simple counter, but it's not work corectly. When i'm parsing actual number and add another one everythin is fine, but - i can't add another one, and when i'm subctracting it brings me an zero. Can you help me? My code and some fiddle http://jsfiddle.net/5vuJQ/:

$(function(products_counter){
    var n = parseInt($('.lce_number').text());
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        n_place.empty().append(n - 1);
    });
});

VisioN · Accepted Answer · 2012-11-13 11:45:25Z

4

You have to pick up the number from .lce_number on each click. Note, live() method was deprecated, you should use on() instead.

var n_place = $('.lce_number');
$('.line_count_elements').on('click', '.lce_add', function() {
    var n = parseInt(n_place.text(), 10);
    n_place.html(n + 1);
});
$('.line_count_elements').on('click', '.lce_remove', function() {
    var n = parseInt(n_place.text(), 10);
    n_place.html(Math.max(0, n - 1));
});

DEMO: http://jsfiddle.net/5vuJQ/7/

edited Nov 13, 2012 at 11:45

answered Nov 13, 2012 at 11:34

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

9 Comments

A. Wolff Over a year ago

If you use delegation, you should unbind too using .off('click') i think

VisioN Over a year ago

@roasted Why do you think so?

A. Wolff Over a year ago

If elements are added dynamically, .on() as delegate will set multi-binds, no?

Lukas Over a year ago

what if ihave and zero? i don't need -1 element :)

Lukas Over a year ago

thx man, it works perfect, i'v change it a little bit (jsfiddle.net/5vuJQ/9) but much thx for help, u rox :)

|

Jean · Accepted Answer · 2012-11-13 11:36:25Z

1

$(function(products_counter){
    var n = parseInt($('.lce_number').text());
    $('.lce_add').live('click', function(){
       $('.lce_number').text(parseInt($('.lce_number').text())+1);
    });
    $('.lce_remove').live('click', function(){
         $('.lce_number').text(parseInt($('.lce_number').text())-1);
    });
});

Demo here : http://jsfiddle.net/Zzbet/

answered Nov 13, 2012 at 11:36

Jean

7725 silver badges13 bronze badges

1 Comment

Lukas Over a year ago

so, what if ihave and zero? i don't need -1 element :)

A. Wolff · Accepted Answer · 2012-11-13 11:44:56Z

1

You could try this instead:

http://jsfiddle.net/5vuJQ/8/

$(function(products_counter){
        var n = parseInt($('.lce_number').text());
        var n_place = $('.lce_number');
        $('.lce_add').on('click', function(){
            n_place.empty().append(++n);
        });
        $('.lce_remove').on('click', function(){
            if(n>0)
              n_place.empty().append(--n);
        });
    });

edited Nov 13, 2012 at 11:44

answered Nov 13, 2012 at 11:35

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Pedro del Sol · Accepted Answer · 2012-11-13 11:35:27Z

0

$(function(products_counter){
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        var n = parseInt($('.lce_number').text())
        n_place.empty().append(n - 1);
    });
});

answered Nov 13, 2012 at 11:35

Pedro del Sol

2,8419 gold badges43 silver badges52 bronze badges

Comments

Naryl · Accepted Answer · 2012-11-13 11:36:12Z

0

$(function(products_counter){      
    var n_place = $('.lce_number');
    $('.lce_add').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n + 1);
    });
    $('.lce_remove').live('click', function(){
        var n = parseInt($('.lce_number').text());
        n_place.empty().append(n - 1);
    });
});

You need to get the value of n after each click!

answered Nov 13, 2012 at 11:36

Naryl

1,8881 gold badge10 silver badges12 bronze badges

Comments

user637563 · Accepted Answer · 2012-11-13 11:58:07Z

0

$('.lce_add').live('click', function(){
        n_place.empty().append(n + 1);
    });

Above lines in your code are not modifying the value of 'n'

To start with - n = 1
On 1st click - append(n + 1) --> 1+ 1 ---> results in 2 being shown
n is still 1
On 2nd click - append(n + 1) --> 1+ 1 --> again results in 2
n is still 1, hence this repeats

You need to modify the value of 'n' before calling append()

 $('.lce_add').live('click', function(){
        n = n + 1;
        n_place.empty().append(n);
    });

http://jsfiddle.net/5tbqX/1/

edited Nov 13, 2012 at 11:58

answered Nov 13, 2012 at 11:39

user637563

3464 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to count in jquery, adding and subtracting numbers

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related