按钮onclick处理程序在javascript文件-Laravel-Mix中找不到函数声明

我多次遇到这样的问题，即无法在外部js文件中获得onclick函数来在我的Laravel项目中工作。以下是我的页面来源的一个例子：

<button onclick="testMe()">test</button>
<script type="text/javascript" src="http://[myurl]/js/jobs.js"></script>

内部作业.js:

function testMe() {
console.log('i have appeared');
}

这个例子来自于在我点击调用之后调用我的脚本标记。我还试着在点击调用之前添加脚本。我也尝试将它添加到我的<head>中，但以下错误仍然存在：

未捕获引用错误：未定义testMe在HTMLButtonElement.onclick

我知道它找不到函数，但我还能尝试什么来解决这个问题？是否可以对外部JS文件调用onclick？

编辑：

这是我的webpack文件的相关行：

.js('resources/js/jobs/jobs.js', 'public/js/jobs.js')

我实际上是怎么称呼它的(与查看页面src的样子相反(：

<script type="text/javascript" src="{{ asset('js/jobs.js') }}"></script>

这也肯定是引入的，因为我在函数上方有一个控制台日志，它被记录到控制台。

当您使用laravel-mix或webpack时，这些预处理器会为每个文件创建一个新的"作用域"，以避免不同文件之间的命名冲突。

因此，函数testMe()在jobs.js文件中声明，但不能从外部范围访问。

您有两个选项：

在浏览器中，"根"作用域是窗口对象。因此，您可以将函数附加到窗口对象，并且可以从HTML元素访问它：

function testMe() {
console.log('i have appeared');
}
window.testMe = testMe

这可能是让它工作的最简单的方法，但如果你有很多功能，它会污染整个范围的

您可以从javscript文件本身将testMe设置为点击处理程序，而不是使用onClickHTML属性：

<button id="test-button">test</button>

function testMe() {
console.log('i have appeared');
}
document.getElementById('test-button').addEventListener('click', testMe)

在调用该方法之前，需要加载外部JS文件。无法保证在单击按钮时会加载外部JS文件，因此创建本地包装器可能是一个更好的主意。本地包装器应该检查远程脚本是否已加载(请参阅此链接以了解如何加载

相关内容