Seemingly defined javascript variable throws undefined error

Question

Given the following code, I'm not sure why I can retrieve longAndObscureVariableName but not anotherLongObscureVariableName. Can you explain, and show how I could make anotherLongObscureVariableName accessible from jsFileNumberTwo.js?

Head of HTML document originally contains:

<script type="text/javascript" id="my_globals">
var longAndObscureVariableName = "foo";
</script>

<script type="text/javascript" src="jsFileNumberOne.js" /></script>
<script type="text/javascript" src="jsFileNumberTwo.js" /></script>

Javascript file jsFileNumberOne.js contains this code, which adds another global variable into the #my_globals element:

jQuery(document).ready(function() {

    // Store the initial variables, to which we will add more
    var initialVars = jQuery('#my_globals').html();
    // Define content for script tag:
    var scriptContent = initialVars;
    // Add to the script content
    scriptContent += 'var anotherLongObscureVariableName = "bar";\n';

    function insertNewInfo() {
        jQuery('#my_globals').html(scriptContent);
    };

    insertNewInfo();
});

When jsNumberOne.js executes, #my_globals changes to this:

<script type="text/javascript" id="my_globals">
var longAndObscureVariableName = "foo";
var anotherLongAndObscureVariableName = "bar";
</script>

Javascript file jsFileNumberTwo.js contains this code, trying to find out the value of anotherLongAndObscureVariableName:

jQuery(document).ready(function($) {
    console.log('longAndObscureVariableName'); // log displays "foo"
    console.log('anotherLongAndObscureVariableName'); // log displays "Uncaught ReferenceError: anotherLongAndObscureVariableName is not defined"
    console.log('window.anotherLongAndObscureVariableName'); // log displays "undefined"
    setTimeout(function(){
        console.log(window.anotherLongAndObscureVariableName);
    },2000); // log still displays "undefined"
});

I can't retrieve anotherLongAndObscureVariableName from within jsFileNumberTwo.js, even though I thought I was adding it to the global scope by putting it into the head of the HTML document.

Is this a scope issue? Is this a timing/sequencing issue? I think that jsFileNumberTwo.js may be accessing the head content before jsFileNumberOne.js executes, but even with the setTimeout function added I still get "undefined".

What is going on? How can I make this work?

Haven't you heard? "seemingly defined" is a new variable type in ECMAScript 7! Jokes aside, modifying the html of a script tag doesn't make the javascript interpreter execute the script again. — user24950814234
– user24950814234, Commented Aug 7, 2015 at 19:00

George Simms · Accepted Answer · 2015-08-07 18:57:31Z

1

The scripts are running from top to bottom. So the second script modifies the first, which has already run and will not run again, so effectively has no effect.

Additionally, you should put things on the window to make globals.

So replace

scriptContent += 'var anotherLongObscureVariableName = "bar";\n';

function insertNewInfo() {
    jQuery('#my_globals').html(scriptContent);
};

insertNewInfo();

with

window.anotherLongAndObscureVariableName = "bar";

,

var longAndObscureVariableName = "foo";

with

window.longAndObscureVariableName = "foo";

answered Aug 7, 2015 at 18:57

George Simms

4,0804 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hommealone Over a year ago

I see! Would this be better: ` <script type="text/javascript" id="my_globals"> window.longAndObscureVariableName = "foo"; </script> ` or even: ` window.longAndObscureVariableName = "foo"; window.anotherLongAndObscureVariableName = ''; ` The 2nd way would let people know that the anotherLongAndObscureVariableName variable exists & can be modified (my intention). Then it could have its value changed from jsFileNumberTwo.js as you suggest. What's the difference between longAndObscureVariableName = "foo"; and window.longAndObscureVariableName = "foo"; ?

George Simms Over a year ago

window.too makes it clear you're deliberately making it global. But ask another question...

Maximillian Laumeister · Accepted Answer · 2015-08-07 18:58:04Z

0

Instead of adding to an existing script element in jsfileNumberOne.js, it would be better to just include the global variable in that file. In your jsfileNumberOne.js, just include the global variable like this:

window.anotherLongObscureVariableName = "bar";

answered Aug 7, 2015 at 18:58

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

Collectives™ on Stack Overflow

Seemingly defined javascript variable throws undefined error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related