how variable scope works in jquery?

Question

var change = 1;

$("#game").click(function (e) {
    if (change == 1) {
        var data = $(e.target).closest("td").text();
        var p1 = $("#player1").val();
        var p1_value = p1 + data;
        $("#player1").val(p1_value);
        change = 2;
    } else(change == 2) {
        var data = $(e.target).closest("td").text();
        var p2 = $("#player2").val();
        var p2_value = p2 + data;
        $("#player2").val(p1_value);
        change = 1;
    }

});

Is it the write way to write? BTW here it is not going to the else loop.

@jijq what is the problem in above code??

kobe
– kobe

2010-12-11 17:07:11 +00:00
Commented Dec 11, 2010 at 17:07 — kobe
– kobe, Commented Dec 11, 2010 at 17:07
jQuery isn't a language you know. JavaScript is a language.

jpsimons
– jpsimons

2010-12-11 17:10:51 +00:00
Commented Dec 11, 2010 at 17:10 — jpsimons
– jpsimons, Commented Dec 11, 2010 at 17:10

Felix Kling · Accepted Answer · 2010-12-11 17:17:02Z

1

JavaScript has only function scope, not "curly bracket scope". If you want to be very correct, you would put all the declarations at the top of the function:

$("#game").click(function(e) {
    var data = '',
        p1 = '',
        p1_value = '',
        p2 = '',
        p2_value = '';

        if (change == 1) {
            data = $(e.target).closest("td").text();
            p1 = $("#player1").val();
            p1_value = p1 + data;
            $("#player1").val(p1_value);
            change = 2;
        }
        else if (change == 2) { // you forgot `if`
            data = $(e.target).closest("td").text();
            p2 = $("#player2").val();
            p2_value = p2 + data;
            $("#player2").val(p1_value);
            change = 1;
        }
});

At least JSLint complains about data being already defined.

But you can optimize (and shorten!) your function in another way:

$("#game").click(function(e) {
    var $player = $('#player' + change);
    $player.val($player.val() + $(e.target).closest("td").text());
    change = (change === 1) ? 2 : 1;
}

edited Dec 11, 2010 at 17:17

answered Dec 11, 2010 at 17:10

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

10 Comments

user113716 Over a year ago

+1 I was trying to leave an example like your last one, but did two really stupid things. Stupid 1: Accidentally created infinite loop. Stupid 2: Used alert(). You'd think I'd learn by now!

Felix Kling Over a year ago

@patrick dw: Poor you... I know how annoying that can be ;)

user113716 Over a year ago

@Felix: In case you're interested, looks like when setting up the toggle event, jQuery triggers the handler, and if your javascript throws any kind of error, the handler continuously fires (in Safari/Chrome anyway). $("div").toggle(function(e){throw('something');}); If there's a <div> on the page, there's an automatic infinite loop. Off to the bug tracker...

Felix Kling Over a year ago

@patrick dw: Actually it is, there are two versions of this method: api.jquery.com/toggle and api.jquery.com/toggle-event. The first one only accepts one callback. And now that I see it, if you use only one function, you are not binding the function as click event handler... it is just the callback that is called after the element is hidden (or shown) (this "method overloading" can be really confusing in jQuery). It is still a bug imo.

user113716 Over a year ago

@Felix: Yep, I just realized that about a minute after filing. I should have checked back here first. I had actually filed it as an enhancement to give consideration to a single function passed as a typical click(). Then it hit me, so I updated it with a comment. In my opinion, it is a very unfortunate decision to have the same method perform entirely different tasks.

|

user113716 · Accepted Answer · 2010-12-11 17:08:26Z

1

Your else should be an else if if you intend to use the condition:

if (change == 1) {
    // ...
} else if(change == 2) {
    // ...
}

As perhaps a better alternative, you can use jQuery's .toggle(), and pass it two functions which alternate on clicks.

$("#game").toggle(function(e) {
            var data = $(e.target).closest("td").text();
            var p1 = $("#player1").val();
            var p1_value = p1 + data;
            $("#player1").val(p1_value);
 }, function(e) {
            var data = $(e.target).closest("td").text();
            var p2 = $("#player2").val();
            var p2_value = p2 + data;
            $("#player2").val(p1_value);
 });

answered Dec 11, 2010 at 17:08

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

how variable scope works in jquery?

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related