Javascript global variable not working properly?
My jQuery code:

    $(document).ready(function() {
        chrome.extension.sendRequest({get: "height"}, function(response) {
            height = response.value;
        });
         
        $("#id").css("height", height+"px");
    });

You don't have to be concerned about the `chrome.extension.sendRequest()`, basically it communicates with a background page to fetch the value for "height" from localStorage and stores the value in global variable `height`.

The problem lies in `$("#id")` not being assigned the height value. However if I were to modify it such that it is now:

    $(document).click(function() {
        $("#id").css("height", height+"px");
    });

it works. Any idea why?
Javascript global variable not working properly?
===

My jQuery code:

    $(document).ready(function() {
        chrome.extension.sendRequest({get: "height"}, function(response) {
            height = response.value;
        });
         
        $("#id").css("height", height+"px");
    });

You don't have to be concerned about the `chrome.extension.sendRequest()`, basically it communicates with a background page to fetch the value for "height" from localStorage and stores the value in global variable `height`.

The problem lies in `$("#id")` not being assigned the height value. However if I were to modify it such that it is now:

    $(document).click(function() {
        $("#id").css("height", height+"px");
    });

it works. Any idea why?