Javascript variable between two external files

Question

I'm new to JS, and I don't understand why this doesn't work. The following is in a file called test1.js

var greeting;

function randomGreeting(){
    var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
    var randGreet = Math.floor(Math.random() * greet.length);

    greeting = {
        alert: greet[randGreet]
    };
}

In a separate test2.js file:

alert(greeting.alert);

In my HTML I have randomGreeting() being called in the body's onLoad, and I have test1.js loaded before test2.js, but I still get undefined from the console when test2 is ran. Why?

Whoops, sorry. randomGreeting is called in the body's onLoad. — REAL O G
– REAL O G, Commented Jul 5, 2016 at 19:36
But alert(greeting.alert) is not in onload? That means it runs before randomGreeting. — JJJ
– JJJ, Commented Jul 5, 2016 at 19:37
Yea I'd post more of your code. Sounds like alert() runs before the onload event handler.. — Mike Christensen
– Mike Christensen, Commented Jul 5, 2016 at 19:37

Steve · Accepted Answer · 2016-07-05 19:51:46Z

1

you have a race condition against test2.js running and the document onload event which fires much later.

You either delay the alert until the variable is set

(function(){
   if (typeof greeting == "undefined")
      return window.setTimeout(arguments.callee, 10);

   alert(greeting.alert);
}());

if you're not recalling randomGreeting, you can just inline it

var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
var randGreet = Math.floor(Math.random() * greet.length);
var greeting = {
    alert: greet[randGreet]
};

Or you can change the scripts to use the defer attribute

<script scr="test1.js"></script>
<script scr="test2.js" defer></script>
<script>
window.onload = function(){
    alert(greeting.alert);
};
</script>

answered Jul 5, 2016 at 19:51

Steve

2,0462 gold badges18 silver badges25 bronze badges

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

1 Comment

REAL O G Over a year ago

I guess this really highlights the fact that I need to better understand the execution order of scripts and event listeners. If you have a good reference to help me better understand that, I'd appreciate it.

Shadi Shaaban · Accepted Answer · 2016-07-05 20:15:28Z

0

Use Immediate Invoking Function:

You could wrap your randomGreeting() in an immediate invoking function code block to get it executed as soon as it's declared and thus your code will work:

var greeting;

(function randomGreeting(){
    var greet = new Array("BORING JS TEST ALERT", "EXCITING JS TEST ALERT", "AWESOME JS TEST ALERT");
    var randGreet = Math.floor(Math.random() * greet.length);

    greeting = {
        alert: greet[randGreet]
    };
})();

In a separate test2.js file:

alert(greeting.alert);

edited Jul 5, 2016 at 20:15

answered Jul 5, 2016 at 19:40

Shadi Shaaban

1,7081 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript variable between two external files

2 Answers 2

1 Comment

Use Immediate Invoking Function:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Use Immediate Invoking Function:

Comments

Your Answer

Sign up or log in

Post as a guest

Related