Menu
I would like to call a javascript function in an external JS file, using the onClick function on a button in this file, form.tmpl.htm.
<button type="button" value="Submit" onClick="Call the external js file" >
The javascript file is in Public/Scripts/filename.js. I have a template file in template/form.tmpl.html. The root folder contains the Public and template folders.
900
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
We can link JavaScript to HTML by adding all the JavaScript code inside the HTML file. We achieve this using the script tag which was explained earlier. We can put the <script></script> tag either inside the head of the HTML or at the end of the body.
window. onload = function(){ // your code here };
To link a JavaScript file to an HTML document, use the <script> tag. You can also use this tag to embed JavaScript code within the HTML document.
I have to agree with the comments above, that you can't call a file, but you could load a JS file like this, I'm unsure if it answers your question but it may help... oh and I've used a link instead of a button in my example...
<a href='linkhref.html' id='mylink'>click me</a> <script type="text/javascript"> var myLink = document.getElementById('mylink'); myLink.onclick = function(){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = "Public/Scripts/filename.js."; document.getElementsByTagName("head")[0].appendChild(script); return false; } </script> If you want your button to call the routine you have written in filename.js you have to edit filename.js so that the code you want to run is the body of a function. For you can call a function, not a source file. (A source file has no entry point)
If the current content of your filename.js is:
alert('Hello world');you have to change it to:
function functionName(){ alert('Hello world'); }Then you have to load filename.js in the header of your html page by the line:
<head> <script type="text/javascript" src="Public/Scripts/filename.js"></script> </head>so that you can call the function contained in filename.js by your button:
<button onclick="functionName()">Call the function</button>I have made a little working example. A simple HTML page asks the user to input her name, and when she clicks the button, the function inside Public/Scripts/filename.js is called passing the inserted string as a parameter so that a popup says "Hello, <insertedName>!".
Here is the calling HTML page:
<html> <head> <script type="text/javascript" src="Public/Scripts/filename.js"></script> </head> <body> What's your name? <input id="insertedName" /> <button onclick="functionName(insertedName.value)">Say hello</button> </body> </html>And here is Public/Scripts/filename.js
function functionName( s ){ alert('Hello, ' + s + '!'); }By loading the .js file first and then calling the function via onclick, there's less coding and it's fairly obvious what's going on. We'll call the JS file zipcodehelp.js.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Button to call JS function.</title>
</head>
<body>
<h1>Use Button to execute function in '.js' file.</h1>
<script type="text/javascript" src="zipcodehelp.js"></script>
<button onclick="ZipcodeHelp();">Get Zip Help!</button>
</body>
</html>
And the contents of zipcodehelp.js is :
function ZipcodeHelp() {
alert("If Zipcode is missing in list at left, do: \n\n\
1. Enter any zipcode and click Create Client. \n\
2. Goto Zipcodes and create new zip code. \n\
3. Edit this new client from the client list.\n\
4. Select the new zipcode." );
}
Hope that helps! Cheers!
–Ken
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
