How To Define ES6 Javascript Module And Call Module Exported Function In Html Code Correctly Windows Tricks

I have a js file in my example project. And I define a js module function and a variable in the js file source code that uses the ES6 syntax. But when I want to use the module function and variable in an Html file, it throws some errors. This article will tell you how to fix these errors and how to define the js module and call the module function in the Html source code correctly using two methods with examples.

Table of Contents

1. How To Define ES6 Javascript Module & Export Function, Variable In JS File.

There are 2 js module files in my example, they are test2.js & test3.js.

I define the ES6 js module function in test3.js like below. Use the export keyword to export the function and variable from the module.

// export the function.
export default function helloFromTest3(name){

    var message = 'hello ' + name + ' from test3.js';

    alert(message);

    console.log(message);

}

// export the variable.
export const moduleName = 'test3';

Below is the source code of test2.js. In this js module, it will import the function and variable exported from the test3.js module using the import keyword.

// import the exported function, variable from the test3.js module. 
import helloFromTest3, { moduleName } from "./test3.js";

// export another function in the test3.js module.
export default function helloFromTest2(name){

    helloFromTest3(name);

    console.log('Current module name is test2');

    console.log('The imported module name is ' + moduleName);
}

2. How To Call ES6 Javascript Module Exported Function In Html Code Correctly.

There is also an index.html file in my example project.

At first, I write the below source code in the index.html file to call the test2.js module exported function.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How To Define ES6 Javascript Module And Call Moduel Exported Function In Html Code Correctly</title>
<script type="module" src="./js/test2.js" charset="utf-8"></script>
<script type="text/javascript">

import hellFromTest2 from "./js/test2.js";

</script>
</head>
<body>
<input type="button" value="Click Me" id="btn1" onclick="helloFromTest2('jerry')"/>

</body>
</html>

When I browse the above Html file in the web browser, I see the error message Uncaught SyntaxError: Cannot use import statement outside a module in the browser inspector console window.

Then I change the above source code from <script type=”text/javascript”> to <script type=”module”> to fix this error.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How To Define ES6 Javascript Module And Call Moduel Exported Function In Html Code Correctly</title>
<script type="module" src="./js/test2.js" charset="utf-8"></script>
<script type="module">

import hellFromTest2 from "./js/test2.js";

</script>
</head>
<body>
<input type="button" value="Click Me" id="btn1" onclick="helloFromTest2('jerry')"/>

</body>
</html>

But when I click the button on the Html page, it shows the below error message Uncaught ReferenceError: helloFromTest2 is not defined at HTMLInputElement.onclick in the web browser inspector console window.
The reason for this error is that the js module exported function can only be used in the module scope. For example, the test3.js module exported function can be imported and called in the test2.js module.
But the js module exported function can not be imported and used in the global scope, so you can not call the hellFromTest2() function in the button’s onclick event directly.

The benefit for define the js module is to avoid global namespace pollution, but you can also use the below method to invoke the module scope imported function in the Html source code correctly.
The window object in js is a global object, we can access it in any js code in the global scope ( HTML page source code ) or module scope ( module js source code ).
Then you can assign the module scope exported function to the window object’s property in the module js file like below.

We add the code line window.hello = helloFromTest2; at the end of the test2.js file.

import helloFromTest3, { moduleName } from "./test3.js";

export default function helloFromTest2(name){

    helloFromTest3(name);

    console.log('Current module name is test2');

    console.log('The imported module name is ' + moduleName);
}

// assign the function helloFromTest2 to the global window object's hello attribute.
window.hello = helloFromTest2;

Now we can call the js statement window.hello(‘tom’) in the global button’s onclick event like below.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How To Define ES6 Javascript Module And Call Moduel Exported Function In Html Code Correctly</title>
<script type="module" src="./js/test2.js" charset="utf-8"></script>
</head>
<body>
<input type="button" value="Click Me" id="btn1" onclick="window.hello('richard')"/>

</body>
</html>

Although we can not access the module scope function in the global scope js code, but we can access the global scope Html element in the module js code.

So we can get the Html button object in the module js code, and then assign the module function to the button click event listener using javascript.

Now when the button is clicked, it will invoke the module exported function as we want, below is the index.html file source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How To Define ES6 Javascript Module And Call Moduel Exported Function In Html Code Correctly</title>
<script type="module" src="./js/test2.js" charset="utf-8"></script>
<!-- declare the module js script -->
<script type="module">

// import the function from the test2.js module.
import hellFromTest2 from "./js/test2.js";

// Get the Html button object.
var btn1 = document.getElementById('btn1');

// Set the module exported function to process the button click event.
btn1.addEventListener("click", () => { hellFromTest2('tom & jerry') });

</script>
</head>
<body>
<input type="button" value="Click Me" id="btn1"/>

</body>
</html>

1. How To Define ES6 Javascript Module & Export Function, Variable In JS File.

2. How To Call ES6 Javascript Module Exported Function In Html Code Correctly.

Leave a Comment Cancel Reply