Question

javascript文件位于Public / Scripts / filename.js中。我在template / form.tmpl.html中有一个模板文件。根文件夹包含公共和模板文件夹

我想在form.tmpl.htm中调用点击按钮的javascript文件。

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

谢谢

Answer 1

我必须同意上面的评论，你不能调用文件，但你可以加载这样的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>

Answer 2

如果您希望按钮调用您在filename.js中编写的例程，则必须编辑filename.js，以便您要运行的代码是函数的正文。因为你可以调用一个函数，不一个源文件。（源文件没有入口点）

如果您的filename.js的当前内容是：

＆＃13;

alert('Hello world');

＆＃13;

您必须将其更改为：

＆＃13;

function functionName(){
	alert('Hello world');
}

＆＃13;

然后你必须在你的html页面的标题中加载 filename.js：

＆＃13;

<head>
	<script type="text/javascript" src="Public/Scripts/filename.js"></script>
</head>

＆＃13;

这样您就可以通过按钮调用 filename.js中包含的功能：

＆＃13;

<button onclick="functionName()">Call the function</button>

＆＃13;

我做了一个小例子。一个简单的HTML页面要求用户输入她的名字，当她点击按钮时，调用Public / Scripts / filename.js中的函数将插入的字符串作为参数传递，以便弹出窗口显示＆＃34; Hello，＆lt; ; insertedName＆GT;！＆＃34;

以下是调用HTML页面：

＆＃13;

<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>

＆＃13;

这是Public / Scripts / filename.js

＆＃13;

function functionName( s ){
	alert('Hello, ' + s + '!');
}

＆＃13;

Answer 3

首先加载.js文件然后通过onclick调用该函数，编码较少，而且相当明显的是什么。我们将调用JS文件 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>

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." );
}

希望有所帮助！干杯！

-Ken

Answer 4

您可以简单地执行以下操作。

假设您的根文件夹中包含名为 myscript.js 的JavaScript文件。在html文件的head标签中添加对javascript源文件的引用。

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

JS档案：（ myscript.js ）

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

HTML

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

Answer 5

似乎，在外部js文件中调用函数是不可能的（在chrome Version 63.0.3239.132上测试）。我在很多方面尝试过，但事实并非如此。我必须使用事件监听器。

Answer 6

您可以在head标记中加载所有脚本，以及脚本在函数括号中执行的操作。但如果您在脚本之外使用这些变量，请确保更改变量的范围。

Answer 7

添加动态脚本 您可以编写函数并添加一个带有js文件路径的src的脚本元素

如何链接外部javascript文件onclick按钮

7 个答案: