如何在单击按钮时链接外部 javascript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7789521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to link external javascript file onclick of button
提问by verdure
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
javascript 文件位于 Public/Scripts/filename.js 中。我在 template/form.tmpl.html 中有一个模板文件。根文件夹包含公共和模板文件夹
I would like to call the javascript file onClick of a button in the form.tmpl.htm.
我想调用form.tmpl.htm 中按钮的javascript 文件onClick。
<button type="button" value="Submit" onClick="Call the external js file" >
Thanks
谢谢
回答by Mike Sav
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...
我必须同意上面的评论，你不能调用一个文件，但你可以像这样加载一个 JS 文件，我不确定它是否能回答你的问题，但它可能会有所帮助......哦，我已经用过在我的例子中是一个链接而不是一个按钮......
<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>
回答by Fry Simpson
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, nota source file. (A source file has no entry point)
如果你想让你的按钮调用你在 filename.js 中编写的例程，你必须编辑 filename.js 以便你想要运行的代码是一个函数体。因为您可以调用函数，而不是源文件。（源文件没有入口点）
If the current content of your filename.js is:
如果您的 filename.js 的当前内容是：
alert('Hello world');you have to change it to:
您必须将其更改为：
function functionName(){
alert('Hello world');
}Then you have to loadfilename.js in the header of your html page by the line:
然后你必须在你的 html 页面的标题中加载filename.js ：
<head>
<script type="text/javascript" src="Public/Scripts/filename.js"></script>
</head>so that you can callthe functioncontained in filename.js by your button:
这样您就可以通过按钮调用filename.js 中包含的函数：
<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>!".
我做了一个小工作示例。一个简单的 HTML 页面要求用户输入她的姓名，当她单击按钮时，Public/Scripts/filename.js 中的函数被调用，将插入的字符串作为参数传递，以便弹出窗口显示“你好，<插入名称>！ ”。
Here is the calling HTML page:
这是调用 HTML 页面：
<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
这里是 Public/Scripts/filename.js
function functionName( s ){
alert('Hello, ' + s + '!');
}回答by Kenneth Wagner
By loading the .jsfile 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.
通过先加载.js文件，然后通过 onclick 调用函数，编码更少，发生的事情也很明显。我们将调用 JS 文件zipcodehelp.js。
HTML:
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.jsis :
内容zipcodehelp.js是：
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
——肯
回答by partizanos
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
这完全有可能，我根据 Mike Sav 的例子做了类似的事情。那是 html 页面，应该是同一文件夹中的外部 test.js 文件
example.html:
示例.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:
测试.js：
alert('hello world')
回答by ShellZero
You could simply do the following.
您可以简单地执行以下操作。
Let's say you have the JavaScript file named myscript.jsin your root folder. Add the reference to your javascript source file in your head tag of your html file.
假设您myscript.js在根文件夹中命名了 JavaScript 文件。在 html 文件的 head 标签中添加对 javascript 源文件的引用。
<script src="~/myscript.js"></script>
JS file: (myscript.js)
JS文件：( myscript.js)
function awesomeClick(){
alert('awesome click triggered');
}
HTML
HTML
<button type="button" id="jstrigger" onclick="javascript:awesomeClick();">Submit</button>
回答by V? Minh
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.
看起来，不可能调用外部 js 文件中的函数（在 chrome 版本 63.0.3239.132 上测试）。我尝试了很多方法，但不能。我必须使用事件侦听器。
回答by ganeshradj
Adding dynamic script to headYou can write function and add an script element with src of js file path
将动态脚本添加到头部您可以编写函数并使用js文件路径的src添加脚本元素
回答by user6200788
You can load all your scripts in the headtag, 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.
您可以在head标记中加载所有脚本，以及您的脚本在函数大括号中执行的任何操作。但是，如果您在脚本之外使用这些变量，请确保更改变量的范围。
