javascript - ES6 Modules: Undefined onclick function after import

Question

Welcome To Ask or Share your Answers For Others

javascript - ES6 Modules: Undefined onclick function after import

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - ES6 Modules: Undefined onclick function after import

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.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:11:50+0000

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>

Categories

javascript - ES6 Modules: Undefined onclick function after import

javascript - ES6 Modules: Undefined onclick function after import

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags