CODEWITHSUNDEEP
javascriptscopeglobal-variablesglobal
Goro
Goro

Reputation: 10249

Global variables in Javascript across multiple files

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?

Upvotes: 158

Views: 305968

Answers (10)

David Spector
David Spector

Reputation: 1678

If the question is how to combine multiple JavaScript files into one global scope in an HTML document, so that both forward and backward variable, constant, and function references are valid, then here is an efficient way to do this.

Use PHP to create your HTML file dynamically. Then your PHP code can append all the JavaScript files together into one file during development, and use that one file during both development and production.

Here is some complete code:

<!DOCTYPE html>
<body>
<h2>Test</h2>

<?php
define("DEV",getenv("DEVELOP"));    // Local development mode env variable

IncludeJS('javascript.js','1.js','2.js','3.js');

function IncludeJS($sitePath,...$args)
    {
    if (DEV)
        {
        $c='';
        foreach ($args as $eachFile)
            $c.=file_get_contents($eachFile);
        file_put_contents($sitePath,$c);
        }
    echo "
        <script src='$sitePath'></script>
        ";
    } // IncludeJS
?>
</body>
</html>

This code automatically combines files 1.js, 2.js, and 3.js into one master JavaScript file javascript.js, so there is just one global scope.

Upvotes: -1

MrAni
MrAni

Reputation: 23

You can set window['yourVariableName'] = yourVariable; and it will make that variable global for all the files.

Upvotes: 0

Jared Wilber
Jared Wilber

Reputation: 6805

If you're using node:

  1. 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);

Upvotes: 2

Dhanush
Dhanush

Reputation: 120

//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 :)

Upvotes: 2

Sajith
Sajith

Reputation: 173

Hi to pass values from one js file to another js file we can use Local storage concept

<body>
<script src="two.js"></script>
<script src="three.js"></script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>

Two.js file

function myFunction() {
var test =localStorage.name;

 alert(test);
}

Three.js File

localStorage.name = 1;

Upvotes: 3

partizanos
partizanos

Reputation: 1136

You can make a json object like:

globalVariable={example_attribute:"SomeValue"};

in fileA.js

And access it from fileB.js like: globalVariable.example_attribute

Upvotes: 1

paulo62
paulo62

Reputation: 2657

I think you should be using "local storage" rather than global variables.

If you are concerned that "local storage" may not be supported in very old browsers, consider using an existing plug-in which checks the availability of "local storage" and uses other methods if it isn't available.

I used http://www.jstorage.info/ and I'm happy with it so far.

Upvotes: 1

Martin
Martin

Reputation: 1296

OK, guys, here's my little test too. I had a similar problem, so I decided to test out 3 situations:

  1. One HTML file, one external JS file... does it work at all - can functions communicate via a global var?
  2. Two HTML files, one external JS file, one browser, two tabs: will they interfere via the global var?
  3. One HTML file, open by 2 browsers, will it work and will they interfere?

All the results were as expected.

  1. It works. Functions f1() and f2() communicate via global var (var is in the external JS file, not in HTML file).
  2. They do not interfere. Apparently distinct copies of JS file have been made for each browser tab, each HTML page.
  3. 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>

Upvotes: 19

Stephen P
Stephen P

Reputation: 14820

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.

Upvotes: 18

tvanfosson
tvanfosson

Reputation: 532695

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>

Upvotes: 149

Related Questions