-3

I want to use variables which is in main.js file in other js file and I tried everything ( exporting modules, declaring global variables) but nothing works and I have to do it because other js file is greatly dependent to those variables which are in main.js file.

Is there any other way to do it, if yes, please enlighten me.

Amrit Gupta
  • 19
  • 6
  • Which implementation of JavaScript are you using? node.js or just casually in the browser? Also, try including the method (along with the code) you've already tried without success. This way, we can modify the code and/or state the reasons why your method doesn't work. – Nahiyan Apr 09 '21 at 05:38
  • @Nahiyan normal js no other libraries. – Amrit Gupta Apr 09 '21 at 05:40
  • 1
    Please provide code that has failed with any error messages. In the worst case, you can put an object onto the window object with the variables inside, and the other scripts will see it, so long a main.js is declared before the scripts that depend on it. – see sharper Apr 09 '21 at 05:40
  • 1
    https://stackoverflow.com/a/3244411/7924858 – abhinavxeon Apr 09 '21 at 05:46

3 Answers3

1

Since you've stated that you're writing JavaScript code to be executed in web browsers, here's what your main.js file may look like (holding the variable importantVariable):

const importantVariable = 10;

Next, we have another JavaScript file, other.js (using the variable importantVariable):

console.log(importantVariable);

In the HTML document, where you're willing to use the scripts, include the main.js BEFORE the other.js file.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script src="main.js"></script>
        <script src="other.js"></script>
    </body>

</html>

You should get "10" in the console, which indicates that the variable sharing of one file with other[s] worked successfully.

Explanation: A variable in the global scope should be accessible to all scripts loaded after it is declared.

Nahiyan
  • 421
  • 3
  • 16
0

We can use es modules in browsers.

index.html

<!DOCTYPE html>
<html>
<body>
<script type="module"  src="./main.js"
</body>
</html

main.js

import { message } from "./other.js";
console.log(message)

other.js

export const message = "haha"

Note:

Due to the CORS policy, openning index.html directly will throw an error.

...has been blocked by CORS policy...

So you need to deploy them in an server.

Yu Miao
  • 322
  • 1
  • 6
  • I must add that one can use a module bundler, such as webpack, that would resolve the imports and exports and bundle the scripts into a single file. This way, it'd be possible to run in the browser without issues with compatibility or CORS policy. – Nahiyan Apr 09 '21 at 06:11
-1

Have you tried importing it into the receiving JavaScript file? This can sometimes be necessary as well as exporting it. Here's an example

In index.js: export someVariable

In otherFIle.js: import { someVariable } from './index'

Finley
  • 83
  • 7