admin管理员组

文章数量:1401777

I have encountered a problem numerous times where I cannot get an onclick function in an external js file to work in my Laravel projects. Here is an example from my page source:

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

Inside jobs.js:

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

This example is from having my script tag be called AFTER I call on click. I have also tried adding the script BEFORE I call on click. I have also tried adding it to my <head>, but the following error still persists:

Uncaught ReferenceError: testMe is not defined at HTMLButtonElement.onclick

I understand that it cannot find the function, but what else can I try to problem solve this? Is it possible to call onclick to an external JS file?

Edit:

Here is the relevant line of my webpack file:

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

How I actually call it (opposed to how it looks viewing the page src):

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

This is also definitely being brought in because I have a console log above the function, which is being logged to the console.

I have encountered a problem numerous times where I cannot get an onclick function in an external js file to work in my Laravel projects. Here is an example from my page source:

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

Inside jobs.js:

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

This example is from having my script tag be called AFTER I call on click. I have also tried adding the script BEFORE I call on click. I have also tried adding it to my <head>, but the following error still persists:

Uncaught ReferenceError: testMe is not defined at HTMLButtonElement.onclick

I understand that it cannot find the function, but what else can I try to problem solve this? Is it possible to call onclick to an external JS file?

Edit:

Here is the relevant line of my webpack file:

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

How I actually call it (opposed to how it looks viewing the page src):

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

This is also definitely being brought in because I have a console log above the function, which is being logged to the console.

  • javascript
  • laravel
Share Improve this question edited Aug 24, 2020 at 14:31 gbalduzzi 10.2k2 gold badges34 silver badges64 bronze badges asked Aug 24, 2020 at 14:11 party-ringparty-ring 1,8811 gold badge19 silver badges44 bronze badges 6
  • 2 Do you use laravel mix or some processor do produce the final jobs.js or you simply include the jobs.js you wrote? – gbalduzzi Commented Aug 24, 2020 at 14:13
  • I use webpack to pile it all, so it actually looks like this: <script type="text/javascript" src="{{ asset('js/jobs.js') }}"></script> in my text editor - the file gets piled though as I can navigate to "http://[myurl]/js/jobs.js" to see the js file there – party-ring Commented Aug 24, 2020 at 14:15
  • try adding console.log('jobs are working') in your javascript file outside of every function and check that when you load the page the text jobs are working appears on console – gbalduzzi Commented Aug 24, 2020 at 14:15
  • Your given code working here too – STA Commented Aug 24, 2020 at 14:15
  • 1 Just want to add that you should use mix('js(jobs.js') to load your file instead of asset to avoid problems in case you want to version your files in production – gbalduzzi Commented Aug 24, 2020 at 14:30
 |  Show 1 more ment

2 Answers 2

Reset to default 10

When you use laravel mix or webpack, those pre-processor create a new 'scope' for every file to avoid naming conflict between different files.

So, the function testMe() is declared inside the jobs.js file, but it is not accessible from the outer scope.

You have 2 options:

  1. Attach the function testMe to the outer scope.

In a browser, the 'root' scope is the window object. So you can attach your function to the window object, and it will be accessible from your HTML elements:

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

This is probably the easiest way to get it working, but if you have a lot of functions it would pollute the whole scope

  1. Attach the handler from javascript instead of using onClick html attribute.

Instead of using the onClick HTML attribute, you can set testMe as the click handler from the javscript file itself:

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

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

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

The external JS file needs to be loaded before you call the method. There is no guarantee that the external JS file will be loaded at the time of clicking the button, so creating a local wrapper may be a better idea. The local wrapper should check if the remote script has loaded (see this link to see how to do it.

本文标签： Button onclick handler does not find function declare in javascript fileLaravel MixStack Overflow

版权声明：本文标题：Button onclick handler does not find function declare in javascript file - Laravel Mix - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744299560a2599512.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。