Global variables in Javascript across multiple files
Solution 1
You need to declare the variable before you include the helpers.js file. Simply create a script tag above the include for helpers.js and define it there.
<script type='text/javascript' >
var myFunctionTag = false;
</script>
<script type='text/javascript' src='js/helpers.js'></script>
...
<script type='text/javascript' >
// rest of your code, which may depend on helpers.js
</script>
Solution 2
OK, guys, here's my little test too. I had a similar problem, so I decided to test out 3 situations:
- One HTML file, one external JS file... does it work at all - can functions communicate via a global var?
- Two HTML files, one external JS file, one browser, two tabs: will they interfere via the global var?
- One HTML file, open by 2 browsers, will it work and will they interfere?
All the results were as expected.
- It works. Functions f1() and f2() communicate via global var (var is in the external JS file, not in HTML file).
- They do not interfere. Apparently distinct copies of JS file have been made for each browser tab, each HTML page.
- All works independently, as expected.
Instead of browsing tutorials, I found it easier to try it out, so I did. My conclusion: whenever you include an external JS file in your HTML page, the contents of the external JS gets "copy/pasted" into your HTML page before the page is rendered. Or into your PHP page if you will. Please correct me if I'm wrong here. Thanx.
My example files follow:
EXTERNAL JS:
var global = 0;
function f1()
{
alert('fired: f1');
global = 1;
alert('global changed to 1');
}
function f2()
{
alert('fired f2');
alert('value of global: '+global);
}
HTML 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
HTML 2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="external.js"></script>
<title>External JS Globals - index2.php</title>
</head>
<body>
<button type="button" id="button1" onclick="f1();"> fire f1 </button>
<br />
<button type="button" id="button2" onclick="f2();"> fire f2 </button>
<br />
</body>
</html>
Solution 3
The variable can be declared in the .js
file and simply referenced in the HTML file.
My version of helpers.js
:
var myFunctionWasCalled = false;
function doFoo()
{
if (!myFunctionWasCalled) {
alert("doFoo called for the very first time!");
myFunctionWasCalled = true;
}
else {
alert("doFoo called again");
}
}
And a page to test it:
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="helpers.js"></script>
</head>
<body>
<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>
<script type="text/javascript">doFoo();</script>
<p>Some stuff in between</p>
<script type="text/javascript">doFoo();</script>
<p>myFunctionWasCalled is
<script type="text/javascript">document.write(myFunctionWasCalled);</script>
</p>
</body>
</html>
You'll see the test alert()
will display two different things, and the value written to the page will be different the second time.
Solution 4
//Javascript file 1
localStorage.setItem('Data',10);
//Javascript file 2
var number=localStorage.getItem('Data');
Don't forget to link your JS files in html :)
Solution 5
If you're using node:
- Create file to declare value, say it's called
values.js
:
export let someValues = {
value1: 0
}
Then just import it as needed at the top of each file it's used in (e.g., file.js
):
import { someValues } from './values'
console.log(someValues);
Goro
Updated on July 08, 2022Comments
-
Goro almost 2 years
A bunch of my JavaScript code is in an external file called helpers.js. Inside the HTML that calls this JavaScript code I find myself in need of knowing if a certain function from helpers.js has been called.
I have attempted to create a global variable by defining:
var myFunctionTag = true;
In global scope both in my HTML code and in helpers.js.
Heres what my html code looks like:
<html> ... <script type='text/javascript' src='js/helpers.js'></script> ... <script> var myFunctionTag = false; ... //I try to use myFunctionTag here but it is always false, even though it has been se t to 'true' in helpers.js </script>
Is what I am trying to do even feasible?
-
Martin over 11 yearsHTML 1 and HTML 2 are identical (except the page title)... still, I made two files, just to have them physically separate.
-
ACV almost 8 yearsdoesn't work for me because when trying to access from another js loaded in another html, it says the variable is not declared
-
J-Dizzle over 2 yearsthat didn't work for me
-
perepm about 2 yearsBear in mind if you use
defer
on the scripts it might fail due to the scripts not running in the order you might expect