javascript - JS import module and run on page load

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)

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)

Share Improve this question edited Mar 24, 2022 at 9:38 Andreas Fester 36.6k9 gold badges99 silver badges125 bronze badges asked Apr 5, 2020 at 19:00 RageZ 1971 gold badge1 silver badge7 bronze badges

are you calling the function in your main.js file? At the end of the file in main.js do this main() – SpiritOfDragon Commented Apr 5, 2020 at 19:03
but I want to call it on page load and in html body I have: onload="main()" – RageZ Commented Apr 5, 2020 at 19:10
provide a working code snippet as what you have tried. it would be difficult to comment without knowing the context. – SpiritOfDragon Commented Apr 5, 2020 at 19:12
ok, I edited the post, added html code and chrome errors – RageZ Commented Apr 5, 2020 at 19:27
1 I have answered your question. check to see if it solves your problem – SpiritOfDragon Commented Apr 5, 2020 at 19:45

Add a comment |

3 Answers 3

Sorted by: Reset to default 16

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)

generateObject.js:

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

main.js:

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

main();

Working example

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JS import module and run on page load - Stack Overflow

3 Answers 3

generateObject.js:

main.js:

与本文相关的文章

评论列表(0)