Javascript variable scope issue - probably simple

Question

I am looking for a quick solution to this issue:

function remove() {
    var clickedbtn;
    $("button[role=remove]").click(function() {
        clickedbtn = this.id;
        alert(clickedbtn); // works, assigns correct value
    });
    alert(clickedbtn); // undefined -- why?
}

The clicked variable is declared with var and assigned a value but the value isn't persistent outside the click() function. Any help is appreciated.

Why do you expect to find out which button the user clicked before the click happens? — SLaks, Oct 05 '14 at 01:46
How could it *possibly* work if assigning to `clickedbtn` (and never to `clicked`)? Now, even fixing that such that it reads `clicked = this.id`, it will still display "undefined" because the alert happens **before** the user had a chance to click the button. — user2864740, Oct 05 '14 at 01:48
Just a tip: don't but simple or help in the title. It bloats the title with unnecessary words and doesn't help people searching afterwards. — wordSmith, Oct 05 '14 at 01:53

score 1 · Answer 1 · answered Oct 05 '14 at 01:45

1

When you try to use the variable in the outer function, the click() hasn't run yet, since the user didn't click yet.

You cannot predict what the value will be in the future.

Separately from that issue, your variable names don't match. (clicked isn't clickedbtn)

answered Oct 05 '14 at 01:45

SLaks

868,454
176
1,908
1,964

He's right. That is the point I brought up in my update. clicked is never being assigned anything. The OP is just alerting the id. Not assigning anything to clicked. – wordSmith Oct 05 '14 at 01:49

wordSmith · Answer 2 · 2014-10-05T01:51:41.013

0

You're never assigning a value toclicked!

so

function remove() {
    var clicked;
    $("button[role=remove]").click(function() {
        clickedbtn = this.id;
        alert(clickedbtn);
        clicked = true; // or if you want clicked set to the id of the button then clicked = this.id;
    });
    alert(clicked);
}

edited Oct 05 '14 at 01:51

answered Oct 05 '14 at 01:45

wordSmith

2,993
8
29
50

That will not make any difference. – SLaks Oct 05 '14 at 01:46
@SLaks you're right. I saw he's never assigning anything to clicked and updated my answer to do so. – wordSmith Oct 05 '14 at 01:51

score 0 · Answer 3 · edited May 23 '17 at 12:05

This issue has nothing to do with scopes - it has to do with when code is run. Asynchronous code is asynchronous and this problem is the same as incorrectly assigning a variable in an AJAX call.

Take the following code (where I have corrected the assignment to the non-existent "clickedbtn" variable) which indicates when things will run by per the numbers in the comments:

# 1
var clicked = "initial value";
# 2
$("button[role=remove]").click(function() {
    # At some point -AFTER- 3
    clicked = this.id;
    alert(clicked);
});
# 3
alert(clicked);

This is because the click callback is only called after the user clicks the button (read: "at some point in the future") while the .click function to add the callback handler returns immediately and the following code to display the alert is executed immediately which happens before the variable has been assigned the ID of the element which may be clicked in the future.

Javascript variable scope issue - probably simple

3 Answers3