Accessing external JS variable from inline html page?

Question

How do you access the variable from an external JavaScript within a HTML page?

In my external JavaScript file(init.js), I created a variable call:

var myMessage="Hello World";

And in my HTML page which has init.js included but when I try alerting it:

alert(myMessage);

It gives me an error. Sample code here

Possible duplicate of [Can I access variables from another file?](http://stackoverflow.com/questions/3244361/can-i-access-variables-from-another-file) — Simon West, Mar 18 '16 at 09:27

score 2 · Answer 1 · edited Mar 18 '16 at 05:45

2

You can call external js variable through making

var init={
myMessage="Hello World";
}

call your html code

alert(init.myMessage);

edited Mar 18 '16 at 05:45

orvi

2,500
1
20
34

answered Mar 18 '16 at 05:43

Muhammad Waqas

1,290
12
19

score 1 · Accepted Answer · edited May 23 '17 at 12:16

your codepen sample does not include the code as an external file but internally so that is an issue, but generally you need to wait for the page and all elements to finish loading.

The example bellow will wait 1000ms or 1sec and then you'll see that the alert will show the variable.

 <div>
 Body content
 </div>
 <script>
   setTimeout(function() {
   alert(myMessage);  
   },1000);
 </script>

The better way is of course to use jQuery's

    $('document').ready(function(){  });

instead of a timer as you can't be sure 1 second is enough. the connection might be poor and it could take more for all the pages to load.

If you dont want to use jQuery there are vanilla JS ways to do it as well.

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Accessing external JS variable from inline html page?

2 Answers2