Why does this JQuery code give me a undefined?

Question

$(document).ready(function () {
    var id;
    $('.dropdown-menu a').click(function () {
        id = $(this).text();
        $('#selected').text($(this).text());
    });
    console.log(id);
});

I am using the above code to get a selected option from a dropdown and then use that variable as a global variable in all my JS files. However, this is giving me an undefined in the console. How do I get id to behave as a global variable in all my JS files.?

Answer 1

You don't need id to be a global variable, I can't see how that would be advantageous at all.

It's logging undefined because it's undefined when you call it, you only set the value after the click event has been called.

$(document).ready(function () {
    var id = "foo";
    $('.dropdown-menu a').click(function () {
        id = $(this).text();
        $('#selected').text($(this).text());

        console.log(id); // This will now log whatever was in your text value
    });
    console.log(id); //This will now log 'foo'
});

This is what's happening with your code at the minute

$(document).ready(function () {

    //You're not passing id a value, so it gets initialised as undefined.
    var id; 

    $('.dropdown-menu a').click(function () {
        id = $(this).text();
        $('#selected').text($(this).text());

        console.log(id); // This will now log whatever was in your text value
    });

    //The click event hasn't been called yet, so id is still undefined.
    console.log(id);

    //You've only assigned a click event above, you didn't call it, id will 
    //not get set until '.dropdown-menu a' has been clicked. 
});

Although outside of the scope of your question, in answer to your comment, to make id a global variable, I would add one global variable, rather than just a random 'id' property.

$(document).ready(function () {
    var App = window.App || (window.App = {});

    App.id = "foo";

    $('.dropdown-menu a').click(function () {
        App.id = $(this).text();
        $('#selected').text($(this).text());

        console.log(App.id); // This will now log whatever was in your text value
    });
    console.log(App.id); //This will now log 'foo'
});




//In some other JS file on your webpage / in scope
var App = window.App || (window.App = {});

console.log(App.id); //This should log the ID, providing it was called after the above code.

One of the most important reasons why adding 'id' as a global is a bad idea, is that you can end up populating the global namespace with lots of arbitrary values, there's no structure, thus it's hard to maintain the code, and you risk overwriting an important property on the global namespace, which could cause undefined behaviour in your website/App.

Having a single global object is an acceptable way of utilising the global namespace, without risking the accidental overrides to other variables, and it's also a lot easier to debug your Apps variables.

A single log of the App object (call it whatever you like), will (presumably) log only the variables your app has created, thus you're not having to look through many other variable to find yours.

If you used my code suggestion above, compare these two logs:

console.log(window.App); 

console.log(window); //The global namespace

You should see that the first log prints you out a nice, clean object with just your variable "id" inside, you should see a tonne of variables in the second log, in fact, you may of even had to scroll down in the console to find your 'id' variable.

Answer 2

$(function()   // jquery
{
   $("#id Your Checkbox").Change(function()
    {
           var id = $(this).Val();
           // now , you can use of id.
           $("#test").text(id);
    });
});

Answer 3

var globalScope = globalScope || {};

$(document).ready(function () {   
    $('.dropdown-menu a').click(function () {
        globalScope.id = $(this).text();
        $('#selected').text($(this).text());
        console.log(globalScope.id);
    });   
});

warning: click is an event, you are logging id after the event registration not execution. Put it in your event if you want to log it every click, after the new association.

use javascript namespacing pattern rather than delcare it out of the function, just to prevent future issues and to orgainze your data.

Answer 4

Because the value of id changes only when you click $('.dropdown-menu a') But in your ready function you print out without any condition. You defined the var id inside the ready function and then defined a function that occurs only on a click event and then print out the id. In between the definition of the var id and the printing its value no click occured so nothing changed therefore it's still undefined. If you want to see what's the value of id after clicking modify your code to :

$('.dropdown-menu a').click(function () {
    id = $(this).text();
    $('#selected').text($(this).text());
    console.log(id);
});

This will print the value in console after clicking .dropdown-menu a

Answer 5

your code will be undefined is right. because when page load but user don't click on $('.dropdown-menu a') and then no value for id variable.

$(document).ready(function () {
    var id;
    $('.dropdown-menu a').click(function () {
        id = $(this).text();
        $('#selected').text($(this).text());
    });
    console.log(id);
});

If you still want to see value of variable you can fix like this

$(document).ready(function () {
    var id;
    $('.dropdown-menu a').click(function () {
        id = $(this).text();
        $('#selected').text($(this).text());
        console.log(id);
    });
});

Hope this help!!! =)

Answer 6

id is a local variable available only withing your $(document).ready() function. If you want to have global access, then define it outside of any functions. This should fix your problem. You can read more about scopes Here.

Hope this helps!