Global variables in Javascript across multiple files

Question

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    lt html gt       lt script type  text javascript  src  js helpers js  gt  lt  script gt           lt script gt    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  lt  script gt    Is what I am trying to do even feasible

User · Accepted Answer

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    lt script type  text javascript   gt     var myFunctionTag   false    lt  script gt   lt script type  text javascript  src  js helpers js  gt  lt  script gt             lt script type  text javascript   gt        rest of your code  which may depend on helpers js  lt  script gt

User · Answer

You can make a json object like   globalVariable  example attribute  SomeValue       in fileA js   And access it from fileB js like   globalVariable example attribute

User · Answer

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

User · Answer

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

User · Answer

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    lt html gt   lt head gt   lt title gt Test Page lt  title gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8   gt   lt script type  text javascript  src  helpers js  gt  lt  script gt   lt  head gt    lt body gt     lt p gt myFunctionWasCalled is  lt script type  text javascript  gt document write myFunctionWasCalled   lt  script gt   lt  p gt    lt script type  text javascript  gt doFoo    lt  script gt    lt p gt Some stuff in between lt  p gt    lt script type  text javascript  gt doFoo    lt  script gt    lt p gt myFunctionWasCalled is  lt script type  text javascript  gt document write myFunctionWasCalled   lt  script gt   lt  p gt    lt  body gt   lt  html gt    You ll see the test alert   will display two different things  and the value written to the page will be different the second time

User · Answer

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt script type  text javascript  src  external js  gt  lt  script gt   lt title gt External JS Globals - index php lt  title gt   lt  head gt   lt body gt   lt button type  button  id  button1  onclick  f1     gt  fire f1  lt  button gt   lt br   gt   lt button type  button  id  button2  onclick  f2     gt  fire f2  lt  button gt   lt br   gt   lt  body gt   lt  html gt    HTML 2   lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt script type  text javascript  src  external js  gt  lt  script gt   lt title gt External JS Globals - index2 php lt  title gt   lt  head gt   lt body gt   lt button type  button  id  button1  onclick  f1     gt  fire f1  lt  button gt   lt br   gt   lt button type  button  id  button2  onclick  f2     gt  fire f2  lt  button gt   lt br   gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

Hi to pass values from one js file to another js file we can use Local storage concept   lt body gt   lt script src  two js  gt  lt  script gt   lt script src  three js  gt  lt  script gt   lt button onclick  myFunction    gt Click me lt  button gt   lt p id  demo  gt  lt  p gt   lt  body gt    Two js file  function myFunction     var test  localStorage name    alert test       Three js File  localStorage name   1

[javascript] Global variables in Javascript across multiple files

Examples related to javascript

Examples related to scope

Examples related to global-variables

Examples related to global