时间戳

首页 > 解决方案 > 按钮 onclick 处理程序在 javascript 文件中找不到函数声明 - Laravel Mix

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

问题描述

我多次遇到一个问题，我无法在外部 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：未在 HTMLButtonElement.onclick 中定义 testMe

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

编辑：

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

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

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

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

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

标签： javascriptlaravel

解决方案

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

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

您有 2 个选项：

  1. 将函数附加testMe到外部范围。

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

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

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

  1. 从 javascript 附加处理程序，而不是使用onClickhtml 属性。

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

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

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

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

推荐阅读