JS import module and run on page load

user_12524630 0
Viewed 6122

I want to call my function main() using html onload event and console.log text imported from another (generateObject.js) file, but when I import function, onload event stop working and function main() is not anymore used.

html:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body onload="main()">
  </body>
</html>

generateObject.js:

export function hello() {
    return "Hello";
}

main.js:

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
}

main();

When I try console.log("text") in main() it works but when I try to use imported function it's not. What should I do to fix that?

Errors in Chrome console:

Uncaught SyntaxError: Cannot use import statement outside a module (main.js:1)

index.html:8 Uncaught ReferenceError: main is not defined at onload (index.html:8)
import export module javascript
3 Answers

modules will have its own scope. They are not available in the global scope like the normal scripts. So it's accessible only inside main.js in your case.

To make it work you need to add it to global scope explicitly.

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
}

window.main = main;

Alternatively, you can remove the event handler from HTML and add it in the JS file.

html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="main.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
  </body>
</html>

main.js

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

window.addEventListener('load', main)
user_13957870

generateObject.js:

export function hello() {
    return "Hello";
}

main.js:

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

main();

Working example

user_127073980

You should add at the end of main.js a call to the main function. Try writing main(); at the bottom of the file.

user_125016870
Related