Get javascript variable value from another function

Question

I've declared a variable in the first .click function, but on my second .click I am trying to get the first variable value, but it's not been able to find it, due to it being in a different function.

How can I set a global variable or something where other functions can use the value too?

$('input[type="checkbox"]').click(function(){
    var checked = 0;
    if($(this).prop("checked") == true){
        var checked = 1
        console.log('checked');
        console.log(checked);
    }
    else if($(this).prop("checked") == false){
        var checked = 0
        console.log('not checked');
        console.log(checked);
    }
});
$('#button-cart').click(function(){
    if(checked == 1){
        alert('can continue fine');
    } else if(checked == 0){
        alert('cannot continue');
    }
})

Error: Uncaught ReferenceError: checked is not defined

dee-see · Accepted Answer · 2016-02-22 14:58:12Z

3

To avoid polluting global scope, the best practice would be to declare the checked variable within a closure so that only your event handlers can access it.

(function() {
    var checked; // No one outside of this immediately invoked function can see the checked variable.
    $('input[type="checkbox"]').click(function(){
        checked = 0;
        if($(this).prop("checked") == true){
            checked = 1
            console.log('checked');
            console.log(checked);
        }
        else if($(this).prop("checked") == false){
            checked = 0
            console.log('not checked');
            console.log(checked);
        }
    });
    $('#button-cart').click(function(){
        if(checked == 1){
            alert('can continue fine');
        } else if(checked == 0){
            alert('cannot continue');
        }
    })
}());

This way, both your click handlers can see the checked variable but it can't be accessed by anyone else.

edited Feb 22, 2016 at 14:58

answered Feb 21, 2016 at 0:04

dee-see

24.1k6 gold badges63 silver badges92 bronze badges

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

1 Comment

Dexygen Over a year ago

Unless of course that variable needs to be accessed from somewhere outside the closure. To which the solution is probably to create a module that contains the event handlers, then exposes the checked variable as a property of that module.

millerbr · Accepted Answer · 2016-02-21 00:00:30Z

2

Declare checked outside the functions - this makes it accessible on the global scope. Then remove the var statements inside the function, or you will create a new variable in the function scope. This code will work:

var checked = 0;
$('input[type="checkbox"]').click(function(){
    if($(this).prop("checked") == true){
        checked = 1
        console.log('checked');
        console.log(checked);
    }
    else if($(this).prop("checked") == false){
        checked = 0
        console.log('not checked');
        console.log(checked);
    }
});
$('#button-cart').click(function(){
    if(checked == 1){
        alert('can continue fine');
    } else if(checked == 0){
        alert('cannot continue');
    }
})

answered Feb 21, 2016 at 0:00

millerbr

2,9411 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

Get javascript variable value from another function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related