Why does this global Javascript variable behave differently inside and outside of a function?
<p>I'm trying to understand why my global variable 'imageUrl' behaves differently inside and outside of the function 'genericOnClick()'</p>

<pre><code>var imageUrl

var id = chrome.contextMenus.create({
    "title": "Add to JC Queue",
    "contexts": ["image"],
    "onclick": genericOnClick
});

function genericOnClick(info) {
    imageUrl = info.srcUrl;
    console.log(imageUrl);
    chrome.tabs.create({
        url: chrome.extension.getURL('dialog.html'),
        active: false
    }, function (tab) {
        // After the tab has been created, open a window to inject the tab
        chrome.windows.create({
            tabId: tab.id,
            type: 'popup',
            focused: true
        });
    });
}

console.log(imageUrl);
</code></pre>

<p>Please let me know where I am going wrong:</p>

<ol>
<li>Declare imageUrl as a global variable</li>
<li>Declare id as a global variable and run a function OnClick()</li>
<li>Log imageUrl to the console inside the function (it displays fine)</li>
<li>Log imageUrl to the console after the function runs (it is undefined)</li>
</ol>
