Jquery variable on click

Question

This is a jquery function that increments num (other function decreases num by one) on click of two different button, however i want them to be incrementing and decreasing the SAME variable, as it is now, when the one button is clicked, num is incremented, however when the other button is clicked it starts from one again and goes down from one when it should use the amount from the other num if you know what i mean.

$(".eventer button[name=lol]").click(function() {

    num = $(this).data('num');
    if (typeof num != 'number') {
        num = 1;
    }
    $(this).attr('disabled', true); // don't allow a second click until previous action      has completed
    //$.ajax('javas.php', {   success: function(response) { 
    $(this).parent().next('.status').html(num);
    $(this).data('num', ++num);
    $(this).attr('disabled', false); // reset
    //})
 });
$(".eventer button[name=myBtn]").click(function() {

    num = $(this).data('num');
    if (typeof num != 'number') {
        num = 1;
    }
    $(this).attr('disabled', true); // don't allow a second click until previous action has completed
    //$.ajax('javas.php', {   success: function(response) { 
    $(this).parent().next('.status').html(num);
    $(this).data('num', --num);
    $(this).attr('disabled', false); // reset
    //})
 });

Any help is appreciated thanks.

So basically you have 2 buttons, one that increments and the other decrements? But what I don't understand is the initial value of the number that you're trying to increment and decrement , where are you getting its value — Wern Ancheta
– Wern Ancheta, Commented Dec 18, 2011 at 9:59
num = 1 in both cases but i need them to be in sync with one and other, so lets say you click the one that increments 5 times so the value is 6, then you click the decrementing one once, i want the value to be 5, but what the code is doing is starting from one for the decreasing function, not the original value of num — foshoeiyyy
– foshoeiyyy, Commented Dec 18, 2011 at 10:01

Richard · Accepted Answer · 2011-12-18 10:18:01Z

2

Have a look at this:

http://jsfiddle.net/2bwuM/13/

You can't declare it as 'a' global variable, because you need a counter per div. That's why the data attribute is the best way to go.

answered Dec 18, 2011 at 10:18

Richard

4,4267 gold badges38 silver badges58 bronze badges

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

3 Comments

Interrobang Over a year ago

If he needs to do this for a bunch of <div>s this is good, +1.

Richard Over a year ago

Ya I happen to know he does from his question yesterday. He should have posted yesterday's jsfiddle with the question.

nnnnnn Over a year ago

+1: I almost suggested a data attribute on the parent but then I thought why complicate things when a simple variable will do it? So I just suggested a local (to the containing document.ready) variable. Nice to have all the background information.

Shoogle · Accepted Answer · 2011-12-18 10:00:01Z

Why dont you use global variables by defining it outside the function.

var num = 1;

$(".eventer button[name=lol]").click(function() {

$(this).attr('disabled', true); // don't allow a second click until previous action      has completed
//$.ajax('javas.php', {   success: function(response) { 
$(this).parent().next('.status').html(num);
num++
$(this).attr('disabled', false); // reset
//})
 });
$(".eventer button[name=myBtn]").click(function() {

$(this).attr('disabled', true); // don't allow a second click until previous action has completed
//$.ajax('javas.php', {   success: function(response) { 
$(this).parent().next('.status').html(num);
num--;
$(this).attr('disabled', false); // reset
//})
});

Interrobang · Accepted Answer · 2011-12-18 10:22:53Z

0

You need only place num in the global scope. (I also fixed your disabled attributes.)

var num = 1; // global
$(".eventer button[name=lol]").click(function() {
    $(this).attr('disabled', 'disabled');
    num++;
    $(this).parent().next('.status').html(num);
    $(this).removeAttr('disabled'); // reset
});
$(".eventer button[name=myBtn]").click(function() {
    $(this).attr('disabled', 'disabled');
    num--;
    $(this).parent().next('.status').html(num);
    $(this).removeAttr('disabled'); // reset
});

Here is a jsFiddle showing it works: http://jsfiddle.net/c8EeE/2/

edited Dec 18, 2011 at 10:22

answered Dec 18, 2011 at 10:00

Interrobang

17.5k3 gold badges57 silver badges63 bronze badges

2 Comments

foshoeiyyy Over a year ago

if i declare it as a global variable, nothing is displayed

Interrobang Over a year ago

I updated my example with a jsFiddle showing that it works-- please check to make sure you're including jQuery etc.

nnnnnn · Accepted Answer · 2011-12-18 10:30:31Z

That's because you're storing the number as a data attribute of the button that was clicked rather than in a common place. The simplest solution is probably just to create a variable num outside both click handlers and have them both refer to it. If your click handlers are defined with a document.ready handler then create num as a local variable within your document.ready handler.

Something like this:

$(document).ready(function() {

   // both click handlers will refer to this variable:
   var num = 1;

   $(".eventer button[name=lol]").click(function() {
      var btn = $(this);
      btn.prop('disabled', true); // don't allow a second click until previous action has completed
      //$.ajax('javas.php', {   success: function(response) { 
      $(this).parent().next('.status').html(num);
      ++num;
      btn.prop('disabled', false); // reset
      //})
   });

   $(".eventer button[name=myBtn]").click(function() {
      var btn = $(this);  
      btn.prop('disabled', true); // don't allow a second click until previous action has completed
      //$.ajax('javas.php', {   success: function(response) { 
      $(this).parent().next('.status').html(num);
      --num;
      btn.prop('disabled', false); // reset
      //})
   });
});

Note all references to .data() have been removed. Also, I'm caching $(this) in a local variable because (a) it should be more effecient, but more importantly (b) once you uncomment your ajax success handler you'll probably find that within that handler this isn't a reference to the clicked element. Also, I've changed your use of .attr() to .prop(). Also (and I haven't done this) you probably should disable/enable both buttons at the same time so the user can't click up and then down before the up result has come in.

P.S. Note that you never need to say $(this).prop('disabled', someVal) when you can simply say this.disabled = someVal; - within an element event handler this is the element itself so you can access/set its properties directly rather than constructing a new jQuery object for it. I have not made this change in the code, but you probably should.

Collectives™ on Stack Overflow

Jquery variable on click

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related