ID Assignment not working outside scope of click function - Jquery

Question

I need to assign an ID to a variable from inside a click function but carry that assignment as well from outside the scope of the function, although i get an 'undefined' if i test for it outside of the click function.(Im not asking about the answer below,my fault)

// var for button
var $firstMobButton;

 $(".preLoaderTest").click(function(){

     var checkDiv = $(this);

     if(checkDiv.attr("id") == "showPreLoader"){
          $firstMobButton = $("#showPreLoader");

         alert($firstMobButton); // object

     }else if(checkDiv.attr("id") == "showPreLoaderDebt"){
         $firstMobButton = $("#showPreLoaderDebt");

         alert($firstMobButton); // object
     }
 });
   // this function doesnt assign the variable to the id OUTSIDE the If statement ...thats what i meant, Sorry i didnt explain well, i didnt mean what it is on instant load, i mean what is it after this function gets carried out)

solved:

   $(".preLoaderTest").click(function(){
    var checkDiv = $(this);
    if(checkDiv.attr("id") == "showPreLoader"){ // check for an id for this partial view

the best way was not to try and assign an ID but to give the button a class then test later if the button had an ID, thanks to Quentin for putting me on the right track...

if you're interested, the full solution:

    // grab dataSource for unselected value
    var $yourAge = yourAge.view(); // change this dataSource value
    // function call on click if onSelect empty html
    $(".preLoaderTest").click(function(){
        var checkDiv = $(this);
        if(checkDiv.attr("id") == "showPreLoader"){ // check for an id for this partial view
        if($("#displayNextSelection").html() === "") {
            $("#displayNextSelection").html('<p class="selectFeedBack">You age: ' + '<b>' + $yourAge[0].text + '</b>' + '</p>');
            $disDeskSel2.html('<p><span class="label label-primary label-ls">Based on your selection </span> You age: ' + $yourAge[0].text + '</p>')
                .hide();
            }
        }
    });

Answer 1

You assign a value to $firstMobButton when preLoaderTest is clicked.

You try to alert it immediately (which is going to be before then, since you've only just registered the event handler).

JavaScript can't violate the rules of linear time!

Answer 2

Since your variable is not assigned until your button is clicked it will be undefined until then. You will be able to use the variable once the click is ran and the variable is assigned as the variable is defined in the global scope.

Your code is executed as follows:

 var $firstMobButton; // variable $firstMobButton is defined with undefined value
 $(".preLoaderTest").click(function(){
     // a click handler is attached to an element
 });
 $(".test").click(function () {
     alert($firstMobButton); // click this one after the preLoaderTest
 });
 alert($firstMobButton); // Your variable is still not assigned to, so undefined

Answer 3

Before click event it will always show undefined in your case.

This is because your alert($firstMobButton); executing before click method.

---

You can get value of $firstMobButton after click is done. Like:

$(".preLoaderTest").click(function(){

     var checkDiv = $(this);

     if(checkDiv.attr("id") == "showPreLoader"){
          $firstMobButton = $("#showPreLoader");

         alert($firstMobButton); // object

     }else if(checkDiv.attr("id") == "showPreLoaderDebt"){
         $firstMobButton = $("#showPreLoaderDebt");

         alert($firstMobButton); // object
     }
     checkValue();//calling after click is done

 });

function checkValue() {
    alert($firstMobButton); 
}

---

Another solution is you can manually trigger click event before alert:

$(".preLoaderTest").click(function(){

     var checkDiv = $(this);

     if(checkDiv.attr("id") == "showPreLoader"){
          $firstMobButton = $("#showPreLoader");

         alert($firstMobButton); // object

     }else if(checkDiv.attr("id") == "showPreLoaderDebt"){
         $firstMobButton = $("#showPreLoaderDebt");

         alert($firstMobButton); // object
     }

 });

$(".preLoaderTest").trigger('click')// manually triggering click event
alert($firstMobButton);