从.html文件中调用.js文件中的函数

Question

我找到了很多关于这个主题的答案，但似乎他们都做了我不想要的事情。这应该是一个相对简单的问题。

在我的HTML中我有：

<button onclick= "myFunction();">Ptin Text</button>

在我的.js文件中我有：

function myFunction() {
    console.log("foo");
}

.hs文件在我的html末尾正确包含但是我得到的错误是找不到函数 myFunction（）。我怎样才能做到这一点？提前谢谢

编辑：该功能在范围内定义：

$(document).ready(function () {
    function myFunction() {
        console.log("foo");
    }
}

据我所知，我的html无法在该范围内看到，但为什么？由于在DOM准备就绪时定义了函数，因此它应该确实能够看到它。

Answer 1

使用属性（onclick= "myFunction();"）内联定义的事件只能访问在全局范围内定义的函数。

更好的想法是使用addEventListener或jQuery.on添加事件侦听器。

$(document).ready(function () {
   function myFunction() {
    console.log("foo");
   }

   $('button').on('click', myFunction);
}

如果您有多个button元素，则需要使用id或class。

Answer 2

猜猜你错误地包含了js文件。

试试这个：

<script src="your_javascript.js"></script>

通过在新标签中打开文件来检查文件。

Answer 3

您说您已加载到页面底部的JS文件中。您需要将其加载到顶部。或者至少在进行函数调用之前。否则它无法找到该功能。