时间戳

首页 > 解决方案 > 将模块中的函数绑定到 onclick 事件

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

问题描述

我有一个带有以下脚本的 html 文件：

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

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

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

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

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');
    }
}

跨度按预期添加，但是，当我按下它们时，我得到一个错误：

未捕获的 ReferenceError：测试未
在 HTMLSpanElement.onclick 处定义（（索引）：1）

我在这里做错了什么？

标签： javascriptecmascript-6moduleonclick

解决方案

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

window.test= test;

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

推荐阅读