Question

我正在谷歌浏览器中尝试ES6模块。我想点击按钮时启动alert（）（在导入的函数中）。

js / notification.js装载得很好但是当我点击按钮时出现错误：

未捕获的ReferenceError：未定义createNotification 在HTMLButtonElement.onclick（（index）：24）＆lt; - index.html中按钮的行

的index.html

<head>
    <script type="module" src="js/main.js"></script>
</head>
<body>
    <section id="container">
       <button type="error" onclick="createNotification()">Create</button>
    </section>
</body>

JS / main.js

import {createNotification} from './notification.js';

JS / notification.js

export function createNotification(type){
    alert();
}

Answer 1

onxyz中使用的函数 - 属性样式处理程序必须是全局变量（它是不使用它们的众多原因之一）。您的功能不是全局的，而是您导入其中的模块的本地功能。（请记住：您的主要脚本也是一个模块;如果它不是，那么您就不能使用import。）

您可以通过分配window属性将其设为全局：

window.createNotification = createNotification;

但使用现代事件处理会更好：

document.querySelector("#container button").addEventListener("click", createNotification);

Live example on plnkr，显然只适用于具有模块支持的尖端浏览器。

附注：作为Andreas points out，type="error"对button元素无效。有效类型为button，submit或reset，默认为submit。（我已将其更改为plnkr中的button。）

ES6模块“Uncaught ReferenceError：函数未在HTMLButtonElement.onclick中定义”

1 个答案: