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.
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.jsor you simply include thejobs.jsyou 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 textjobs are workingappears 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 ofassetto avoid problems in case you want to version your files in production – gbalduzzi Commented Aug 24, 2020 at 14:30
2 Answers
Reset to default 10When 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:
- Attach the function
testMeto 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
- Attach the handler from javascript instead of using
onClickhtml 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744299560a4567431.html
评论列表（0条）