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

Question

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

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

在jobs.js中：

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

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

未捕获的 ReferenceError：testMe 未在 HTMLButtonElement.onclick 中定义

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

编辑：

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

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

我实际上如何称呼它（与查看页面 src 的外观相反）：

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

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

Answer 1

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

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

您有 2 个选择：

在浏览器中，“根”范围是窗口对象。因此，您可以将您的函数附加到 window 对象，并且可以从您的 HTML 元素访问它：

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

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

onClick您可以将testMejavscript 文件本身设置为点击处理程序，而不是使用HTML 属性：

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

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

document.getElementById('test-button').addEventListener('click', testMe)