How do I link an “onClick” event to a javascript file?
Question
I have a button with an onclick event.
My javascript for the button is not in the HTML document, but I linked it to the document with <script src="example.js"></script> . How do I make the "onclick" event link to my javascript file? 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.
PPS- Sorry if my question is a little vague, I had trouble describing it. Just tell me and I can clear up something or delete this question.
7 answers
solution1
1 2015-11-18 18:32:48
onClick can't redirect you to another page.It is not designed that way. All you have to do is include your .js file in the header section in html document . It will include the .js page to the current html document. 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
onClick="pasuser(//parameters);"
solution2
0 2015-11-18 18:20:51
If you import your .js file, actually is like writing that code in the page itself. Just call the function name in the onclick specification.
solution3
0 2015-11-18 18:22:20
不要将onclick设置为login.js，请确保将.click值设置为函数的名称，因此onclick应该为
<input type="button" value="Login" onClick="pasuser(< put parameter here )">
solution4
0 2015-11-18 18:22:21
我假设您只希望onclick调用该函数。
<input type="button" value="Login" onClick="pasuser(<parameters>)">
solution5
0 2015-11-18 18:22:28
If I'm not mistaken, the OnClick requires the function to be run. 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)">
solution6
0 2015-11-18 18:23:58
Ok well what you have to do is to call the function not the js. so the code should look like this
<center>
<input type="button" value="Login" onClick="pasuser(form)">
</center>
solution7
0 ACCPTED 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. So treat your function pasuser(form) just as if it was directly coded in the 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. You have to put inside there some javascript code which calls your function, passing the form as argument: 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
- You should never, ever, never, have such an username/password verification on client side code! Ever!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.