javascript - 将模块中的函数绑定(bind)到 onclick 事件

Question

我有一个包含以下脚本的 html 文件:

<script type="module" src="js/app.js"></script>

这是我将应用程序逻辑与其他导入一起放置的地方。在这个 app.js 文件中，我有一个名为 test();

的函数

function test() {
    console.log("aaa");
}

此函数在使用以下代码动态附加的 HTML span 元素中的 onclick 事件中调用:

buildSideBar(technologies) {
    if(technologies.length > 0) {
        let spans = ``;
        const loader = document.getElementById('loader');
        const sidebar = document.getElementById('sidebar');
        for(const technology of technologies) {
            spans += `<span onclick="test()">${technology}</span>`;
        }
        loader.style.height = '0';
        loader.style.visibility = 'hidden';
        sidebar.innerHTML += spans;
        sidebar.classList.remove('hidden');
    }
}

跨度是按预期添加的，但是，当我按下它们时，我收到错误:

Uncaught ReferenceError: test is not defined
at HTMLSpanElement.onclick ((index):1)

我在这里做错了什么？

Answer 1

test() 函数在模块外部不可见，解决方案是将其添加到 window 对象中，以便可以访问它。

window.test= test;

正如 @VLAZ 提到的，还有将跨度动态绑定(bind)到 onclick 的解决方案。