I am trying to include multiple JS files into one main JS file (called main.js) and include that into my HTML file. One of those JS files have a set of variables (called variables.js) I want to use in my HTML file. I came across using the import/export modules so I tried to put this to use. While I was able to access the variables from variables.js within my main.js file, I am not able to access them in my HTML file. Everytime I run the code, I keep getting the following error:
index.html:38 Uncaught ReferenceError: arrStr1 is not defined at index.html
Below is a code sample of what I am trying to do:
variables.js file
let arrStr1 = ["John", "Doe", "Jane", "Doe", "Michael", "Smith"];
export { arrStr1 };
main.js file
import { arrStr1 } from "./variables.js";
index.html
<script src = "main.js" type = "module"></script>
<script>
console.log(arrStr1);
</script>
Please help me solve this problem. Thank you.
1
Option 1 (best practice)
You can use the <script type="module"> tag in your HTML, which will allow you to directly import the variables
Edit your HTML file as follows
<script type="module">
import { arrStr1 } from "./variables.js";
console.log(arrStr1);
</script>
Option 2
Make your variables or functions globally accessible to access them in your html file.
Edit your main.js as follows
import { arrStr1 } from "./variables.js";
window.arrStr1 = arrStr1;
3