How to link external javascript file onclick of button

不想你离开。 提交于 2019-12-17 08:26:12

问题


The javascript file is there in Public/Scripts/filename.js. I have a template file in template/form.tmpl.html. Root folder contains Public and template folders

I would like to call the javascript file onClick of a button in the form.tmpl.htm.

  <button type="button" value="Submit" onClick="Call the external js file" >

Thanks


回答1:


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>



回答2:


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 + '!');
}



回答3:


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




回答4:


It is totally possible, i did something similar based on the example of Mike Sav. That's the html page and ther shoul be an external test.js file in the same folder

example.html:

<html>
<button type="button" value="Submit" onclick="myclick()" >
Click here~!
<div id='mylink'></div>
</button>
<script type="text/javascript">
function myclick(){
    var myLink = document.getElementById('mylink');
    myLink.onclick = function(){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "./test.js"; 
            document.getElementsByTagName("head")[0].appendChild(script);
            return false;
    }
    document.getElementById('mylink').click();
}
</script>
</html>

test.js:

alert('hello world')



回答5:


You could simply do the following.

Let's say you have the JavaScript file named myscript.js in your root folder. Add the reference to your javascript source file in your head tag of your html file.

<script src="~/myscript.js"></script>

JS file: (myscript.js)

function awesomeClick(){
  alert('awesome click triggered');
}

HTML

<button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button>



回答6:


it seems like, it is impossible to call to a function in an external js file (test on chrome Version 63.0.3239.132). I tried it in many ways but it can't. I have to use the event listener.




回答7:


You can load all your scripts in the head tag, and whatever your script is doing in function braces. But make sure you change the scope of the variables if you are using those variables outside the script.




回答8:


Adding dynamic script to head You can write function and add an script element with src of js file path



来源:https://stackoverflow.com/questions/7789521/how-to-link-external-javascript-file-onclick-of-button

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!