CODEWITHSUNDEEP
javascriptjqueryvariablesscope
Leon Gaban
Leon Gaban

Reputation: 39034

button variable scope - how to update variable in parent scope? jQuery

Updated jsFiddle: http://jsfiddle.net/leongaban/NmH97/

Inside my main function is a button state modifier function and several click functions.

Having a bit of trouble updating the boolean values in the parent function. I could solve this by using global variables, but I know I shouldn't need to do that here.

In the function below, when #toggle_company is clicked I pass the bool company (which is set to true by default) into the setupToggleButtons function. The current state is then switched, but the original company bool value is unchanged, how would you write this to target and update the variable company in the parent function wireSearchIcons?

var wireSearchIcons = function() {

    // Boolean Flags
    var company = true;
    var phone = true;

    var orange_on = '#F37B21'; var orange_off = '#f3cdb1';
    var green_on = '#3DB54A';  var green_off = '#d8e0c3';

    // Other code...

        $("#toggle_company").unbind('click').bind('click', function () {
            setupToggleButtons(company, '#toggle_company path', orange_on, orange_off);
        });

        function setupToggleButtons(bool, path, on, off) {

            var path = $(path);
            if (bool) {
                path.css('fill', off);
                bool = false;
                return bool;
            } else {
                path.css('fill', on);
                bool = true;
                return bool;
            }

            console.log(bool);
        }
}

Upvotes: 0

Views: 241

Answers (2)

Mike Edwards
Mike Edwards

Reputation: 3771

It doesn't make sense to write a setupToggleButtons function that does so little. You should inline the code into the click handlers, or create the click handlers within the setup function.

var wireSearchIcons = function() {

    // Flags
    var company = true;
    var phone = true;

    var orange_on = '#F37B21'; var orange_off = '#f3cdb1';
    var green_on = '#3DB54A';  var green_off = '#d8e0c3';

    // Toggle Button States
    $("#toggle_company").unbind('click').bind('click', function () {
        company = !company;
        $('#div_company').css('background', company ? orange_on : orange_off);
    });
    $("#toggle_phone").unbind('click').bind('click', function () {
        phone = !phone;
        $('#div_phone').css('background', phone ? green_on : green_off);
    });

}

wireSearchIcons();

Upvotes: 0

Guffa
Guffa

Reputation: 700552

When you use the variable in the function call, you will be sending the value that the variable contains, not the variable itself. Changing the parameter has no effect on the variable where the value came from.

Javascript doesn't support sending parameter by reference, so just return the value from the function, and assign it back to the variable:

    $("#toggle_company").unbind('click').bind('click', function () {
        company = setupToggleButtons(company, '#toggle_company path', orange_on, orange_off);
    });

    function setupToggleButtons(bool, path, on, off) {

        var path = $(path);
        if (bool) {
            path.css('fill', off);
            bool = false;
        } else {
            path.css('fill', on);
            bool = true;
        }

        return bool;
    }

Upvotes: 1

Related Questions