logo标签列表

如何从HTML元素事件中调用<script type="module">内的JavaScript函数？

javascriptimportscope
9

我有一个简单的HTML页面，如下导入了一个JS模块：

.. snip
<button onclick="btnClick()">Go!</button>

<script type="module">
import { func1 } from './utils.js'

function btnClick() {
   func1()
}
</script>

点击按钮会出现错误：btnClick（）未定义。

为什么会出现这种情况？如何将这些功能恢复到正确的范围内？

这个回答解决了您的问题吗？未捕获的引用错误：在onclick中未定义函数。 - Tân
3个回答
7
JavaScript执行栈拥有自己的作用域，因此一个简单易行的解决方案是，您可以将可访问的函数分配给窗口作用域，如下所示：
<button onclick="btnClick()">Go!</button>

<script type="module">
    import { func1 } from './utils.js'

    function btnClick() {
      func1()
    }

    // variable function
    window.btnClick = btnClick;

    // or anonymous function
    window.btnClick = function(youCanSetParams){
      func1()
    }
</script>
如果您有多个函数，请使用 window._myFns = { btnClick, onLoad } 这样的方式。 - user949300
1

来自 "module" 的变量无法从外部访问，因此请使用 type="text/javascript"

<script type="text/javascript">

function btnClick() {
   console.log('here')
}
</script>
<button onclick="btnClick()">Go!</button>

1
这个答案提供了一种解决方法，但并非 OP 所问的实际答案。你能提供一个参考吗？ - mkorman
你只能在模块内使用import和export语句，而不能在常规脚本中使用 -> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules - Shivaji Mutkule
1
当脚本是模块类型时，它只能监听事件，无法从HTML调用函数。因此，您可以将EventListener添加到click事件中，检查调度事件的目标元素的ID，然后调用该函数。
<script type="module">
    import { func1 } from './utils.js'
    window.addEventListener('click' , e=> {
        switch(e.target.id){
           case 'btnGo':
             btnClick();
             break;
        }
    })
    function btnClick() {
       func1()
    }
</script>

<html>
    <button id="btnGo">Go!</button>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接