如何将“ onClick”事件链接到javascript文件？
[英]How do I link an “onClick” event to a javascript file?
问题描述
I have a button with an onclick event. 
我有一个带有onclick事件的按钮。
My javascript for the button is not in the HTML document, but I linked it to the document with <script src="example.js"></script> . 我的按钮Javascript不在HTML文档中，但我使用<script src="example.js"></script>将其链接到文档。 How do I make the "onclick" event link to my javascript file? 如何使“ onclick”事件链接到我的javascript文件？ This is what I tried. 这就是我尝试过的。
function pasuser(form) {
if (form.id.value=="user") {
if (form.pass.value=="password") {
location="example.html"
} else {
alert("Invalid Password")
}
} else {
alert("Invalid UserID")
}
}
<!DOCTYPE html>
<html>
<head>
<title>NATUREBOWL- LOGIN</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico"/>
<script src="loginform.js"></script>
</head>
<body>
<p>Log in to Conitinue</p>
<form name="login"><p>username </p><input name="id" type="text">
<br/>
<p>password</p>
<input name="pass" type="password">
<center>
<input type="button" value="Login" onClick="login.js">
</center>
</center>
</div>
</body>
</html>
PS- The function pasuser(form) code is login.js. PS- function pasuser(form)代码为login.js。
PPS- Sorry if my question is a little vague, I had trouble describing it. PPS-对不起，如果我的问题有点含糊，我很难描述它。 Just tell me and I can clear up something or delete this question. 告诉我，我可以清除一些内容或删除此问题。
7 个解决方案
解决方案1
1 2015-11-18 18:32:48
onClick can't redirect you to another page.It is not designed that way. onClick不能将您重定向到另一个页面。 All you have to do is include your .js file in the header section in html document . 您所要做的就是将.js文件包含在html文档的标题部分中。 It will include the .js page to the current html document. 它将包括当前html文档的.js页面。 You have to ask for your desired function which will be triggered when the button is clicked 您需要询问所需的功能，该功能将在单击按钮时触发
<head>
<script src="loginform.js"></script>
</head>
Then you can attach any function from this .js file to your button's onClick envent 然后，您可以将此.js文件中的任何功能附加到按钮的onClick envent
onClick="pasuser(//parameters);"
解决方案2
0 2015-11-18 18:20:51
If you import your .js file, actually is like writing that code in the page itself. 如果导入.js文件，实际上就像在页面本身中编写该代码一样。 Just call the function name in the onclick specification. 只需在onclick规范中调用函数名称即可。
解决方案3
0 2015-11-18 18:22:20
不要将onclick设置为login.js，请确保将.click值设置为函数的名称，因此onclick应该为
<input type="button" value="Login" onClick="pasuser(< put parameter here )">
解决方案4
0 2015-11-18 18:22:21
我假设您只希望onclick调用该函数。
<input type="button" value="Login" onClick="pasuser(<parameters>)">
解决方案5
0 2015-11-18 18:22:28
If I'm not mistaken, the OnClick requires the function to be run. 如果我没记错的话，OnClick需要运行该功能。 Just linking the file isn't enough because your browser doesn't know that you want it to run the function. 仅链接文件是不够的，因为您的浏览器不知道您要它运行该功能。 Try this: 尝试这个：
<input type="button" value="Login" onClick="pasuser(form)">
解决方案6
0 2015-11-18 18:23:58
Ok well what you have to do is to call the function not the js. 好的，您要做的是调用函数而不是js。 so the code should look like this 所以代码应该像这样
<center>
<input type="button" value="Login" onClick="pasuser(form)">
</center>
解决方案7
0 已采纳 2015-11-18 19:02:59
External code linked with a <script src=""/> tag behaves just like the code you put directly inside <script></script> tags. 与<script src=""/>标记链接的外部代码的行为就像直接放在<script></script>标记中的代码一样。 So treat your function pasuser(form) just as if it was directly coded in the HTML. 因此，对待函数pasuser(form)就像直接在HTML中进行编码一样。
OnClick and the other event properties want javascript code inside their quotes, therefore specifying a file name onClick="login.js" is absolutely not correct. OnClick和其他事件属性希望在其引号内包含JavaScript代码，因此，指定文件名onClick="login.js"绝对不正确。 You have to put inside there some javascript code which calls your function, passing the form as argument: onClick="pasuser(document.forms.login)" 您必须在其中放置一些javascript代码来调用您的函数，并将表单作为参数传递： onClick="pasuser(document.forms.login)"
Be aware, though, that your code has many weaknesses and bad design issues: 但是请注意，您的代码存在许多弱点和不良的设计问题：
- Nowdays, accessing forms and form elements by name is a bit of an old practice 如今，按名称访问表单和表单元素是一种古老的做法
- Having an element named "id" can lead to ambiguity inside the DOM tree 具有名为“ id”的元素可能导致DOM树内部的歧义
- You should never, ever, never, have such an username/password verification on client side code! 您永远，永远，永远不要在客户端代码上有这样的用户名/密码验证！ Ever! 曾经！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.