Menu
I am testing ES6 Modules and want to let the user access some imported functions using onclick:
test.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Module Test</title> </head> <body> <input type="button" value="click me" onclick="hello();"/> <script type="module">import {hello} from "./test.js";</script> </body> </html> test.js:
export function hello() {console.log("hello");} When I click the button, the developer console says: ReferenceError: hello is not defined. How can I import functions from modules so that they are available as onclick functions?
I am using Firefox 54.0 with dom.moduleScripts.enabled set to true.
775
Module creates a scope to avoid name collisions.
Either expose your function to window object
import {hello} from './test.js' window.hello = hello Or use addEventListener to bind handler. Demo
<button type="button" id="hello">Click Me</button> <script type="module"> import {hello} from './test.js' document.querySelector('#hello').addEventListener('click', hello) </script> 
ES6 modules:When you import a script in the following manner using type="module":
<script type="module">import {hello} from "./test.js";</script> You are creating a certain scope called module scope. Here is where modules scope is relative to other levels of scope. Starting from global they are:
const and let not in a block) are accessible from everywhere in the Javascript runtime environmentlet and const variables are block scopedYou were getting the referenceError because the hello() function was declared in the module, which was module scoped. As we saw earlier declarations inside module scope are only available within that module, and you tried to use it ouside the module.
We can make declarations inside a module global when we explicitly put it on the window object so we can use it outside of the module. For example:
window.hello = hello; // putting the hello function as a property on the window object If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
