这个问题在这里已经有了答案:
ES6 Modules: Undefined onclick function after import
(4 个回答)
去年关闭。
我有一些带有 onclick 按钮的 HTML事件触发一个 JavaScript 函数。
当 JavaScript 函数是 ES6 模块函数时，我需要实现相同的行为。
我有一个简单的例子:
<head>
<meta charset="utf-8">
<script src="./js1.js"></script>
<script type="module" src="./js2.js"></script>
<script type="module">
import { Es6Module3 } from "./js3.js";
document.querySelector('#myFunction3').addEventListener('click', Es6Module3.myFunction3);
</script>
</head>
<body>
<button onclick="myFunction1(1)">button1</button>
<button onclick="Es6Module2.myFunction2(2)">button2</button>
<button type="button" id="myFunction3">button3</button>
</body>也转载于https://jsfiddle.net/avnerm/jho6qgLu/18/
点击button1时，js1.js中的myFunction1函数被调用，传入的值正确打印到控制台。好的!
但是当单击 button2 时，我收到一条消息:
ReferenceError: Es6Module is not defined
在某些时候，我可以通过设置事件监听器来触发模块函数(button3 的用例)，但它现在不起作用，我不知道如何在此实现中将参数传递给函数。
就我而言，我需要能够传入一个参数。
如何从 onclick 属性调用 ES6 模块函数，并将参数传递给它？
编辑:
@CertainPerformance，我的原始html代码涉及jinja2，它跨越代码3次(3组ids:1、2、3)
我使用了您的模式，它创建了 3 个按钮(按钮 1、按钮 2、按钮 3)和 3 个事件监听器。当我单击每个按钮时，我可以在日志中看到相应的组 ID。
这对我来说非常有用!
我只是想确认这是处理 html、jinja2 和 es6 的方式。
谢谢!
class Es6Module2 {
static myFunction2 = function(val) {
console.log('BEG myFunction2');
console.log('val');
console.log(val);
};
};
export { Es6Module2 };{% block content %}
<div class="admin-view-groups">
{% for group in groups %}
<button id="button{{group.id}}">Download Group</button>
<script type="module">
import { Es6Module2 } from './Es6Module2.js';
document.querySelector('#button{{group.id}}').addEventListener('click', () => {
Es6Module2.myFunction2({{ group.id }});
});
</script>
{% endfor %}
</div>
{% endblock %}最佳答案
唯一的方法是将导入的模块函数分配给窗口对象，以便内联处理程序可以引用它:
<script type="module">
import { Es6Module2 } from "./js2.js";
window.Es6Module2 = Es6Module2;
</script>
但这违背了模块的目的。
无论如何，内联处理程序应该 never, ever使用。他们有太多的问题，包括这个(要求调用的函数在全局范围内)。最好避免使用它们并使用
addEventListener相反，要正确添加监听器。如果要添加一个监听器，该监听器调用带有参数的函数，则只需在监听器中调用带有参数的函数:
import { fn } from './script.js';
document.querySelector('button').addEventListener('click', () => {
fn('foo');
});
关于javascript - 如何从 onclick 调用 ES6 模块函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62032401/