CODEWITHSUNDEEP
javascriptjqueryglobal-variables
Snoops
Snoops

Reputation: 215

Why isn't my variable available globally in Javascript / Jquery?

I'm trying to declare a global variable called GlobalVarTest, which is defined in a function within my function LikeTermsCombiner2(). In the code below, .ReplaceThis gets replaced successfully, as it appears within the same function in which the variable is defined, but .ReplaceThis2 does not get replaced outside of the function.

I noted in the code where I've also tried to declare GlobalVarTest.

My actual code is rather long, but I whittled it down to the bare bones so that it's clear where all of the functions are. (In other words, some functions appear not to do anything in this code, but they serve a purpose in the actual code.)

var GlobalVarTest;

function LikeTermsCombiner2() {


   //var GlobalVarTest; Tried putting this here

  $(function() { 

   //var GlobalVarTest; Also tried putting this here

    $(function() { 

        GlobalVarTest = "5";  
        $(".ReplaceThis").html(GlobalVarTest);      

    });  

   $(".ReplaceThis2").html(GlobalVarTest);      


    });

}


$('.Expression').each(function() {

  console.log(LikeTermsCombiner2());

 });

http://jsfiddle.net/2x7049bs/162/

Upvotes: 0

Views: 71

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

Solution

You can move your embdedded function into a separate function and return a variable, assigning this to something within the first function. This does not need to be used, but will ensure the first function waits for the second to complete before continuing. As demonstrated below, this means that the global value is no longer undefined.

Please see the demo below for a working example.

Explaination

$(function() { ... }

The code above is short hand for making a function run on window load, the issue you is that although you are assigning them in various locations, that does not mean the will be completed in that order.

Moving the $(".ReplaceThis2").html(GlobalVarTest); to after the closing tag of function LikeTermsCombiner2() { ... } will still not necessarily work. That function effectively adds a function to the run list after page load, but does not wait for it to be run (this function then adds a second to the run list, but again does not wait for it to be completed).

Adding a function to the run list is a much quicker action than actually processing that entire element of code so the 'parent' function races ahead without variables being defined.

Demo

var GlobalVarTest;

function LikeTermsCombiner2() {


  //var GlobalVarTest;

  $(function() {

    // Move current code into a separate function.
    // Call the separate function and assign to variable to ensure function waits for result 
    waitForComplete = setGlobalFn();
  
    $(".ReplaceThis2").html(GlobalVarTest);


  });

  return "LikeTermsCombiner2 return value";

}


// Bring the code that sets GlobalVarTest into a different function
function setGlobalFn() {

  // Your code...

  // Set GlobalVarTest
  GlobalVarTest = "5";

  // Replace as needed
  $(".ReplaceThis").html(GlobalVarTest);

  // Return a value (does not need to be used)
  return true;

}


$('.Expression').each(function() {

  console.log(LikeTermsCombiner2());

});
.root {
  border-top: thin black solid;
}

.root>sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 70%;
}

.Index {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 70%;
}

.index {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-size: 70%;
}

span[class*='variable'] <span class="Parentheses FirstSet">(<span class="TermWrapper"><span class="Coefficient">1</span></span>) </span><span class="Parentheses SecondSet">(
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="Expression"></span>
<br> This should say five: <span class="ReplaceThis"></span>
<br> This should also say five: <span class="ReplaceThis2"></span>

Upvotes: 1

Related Questions