ES6 Modules: Undefined onclick function after impo

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.

标签： javascript ecmascript-6 es6-modules

2条回答

不美不萌又怎样

2楼-- · 2019-01-26 08:57

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>

0人赞添加讨论(0) 举报

做个烂人

3楼-- · 2019-01-26 09:06

Module scope in `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:

Global scope: All declarations outside a module on the outermost level (i.e. not in a function, and for const and let not in a block) are accessible from everywhere in the Javascript runtime environment
Module scope: All declarations inside a module are scoped to the module. When other javascipt tries to access these declarations it will throw a reference error.
Function scope: All the variables declared inside (the top level of) a function body are function scoped
Block scope: let and const variables are block scoped

You 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

0人赞添加讨论(0) 举报

ES6 Modules: Undefined onclick function after impo

Module scope in ES6 modules:

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Module scope in `ES6` modules: