如何将“;onClick"事件转换为javascript文件

How do I link an "onClick" event to a javascript file?

本文关键字：转换 事件 文件 javascript quot onClick      更新时间：2023-09-26

我有一个带有onclick事件的按钮。

我的按钮javascript不在HTML文档中，但我用<script src="example.js"></script>将其链接到了文档中。如何使"onclick"事件链接到我的javascript文件？这就是我尝试过的。

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-function pasuser(form)代码为login.js.

PPS-很抱歉，如果我的问题有点模糊，我很难描述它。告诉我，我可以澄清一些问题或删除这个问题。

onClick无法将您重定向到另一个页面。它不是这样设计的。您所要做的就是将.js文件包含在html文档的头部分中。它将包含当前html文档的.js页面。你必须询问你想要的功能，当点击按钮时，该功能将被触发

<head>
   <script src="loginform.js"></script>
</head>

然后，您可以将这个.js文件中的任何函数附加到按钮的onClick环境中

onClick="pasuser(//parameters);"

与<script src=""/>标记链接的外部代码的行为与直接放入<script></script>标记中的代码类似。因此，将函数pasuser(form)视为直接在HTML中编码的函数。

OnClick和其他事件属性希望javascript代码包含在它们的引号中，因此指定文件名onClick="login.js"是绝对不正确的。你必须在里面放一些javascript代码，它会调用你的函数，并将表单作为参数传递：onClick="pasuser(document.forms.login)"

不过，请注意，您的代码有许多弱点和糟糕的设计问题：

  1. 现在，按名称访问表单和表单元素有点过时了
  2. 拥有一个名为"id"的元素可能会导致DOM树内部的歧义
  3. 你永远不应该在客户端代码上进行这样的用户名/密码验证！永远

如果导入.js文件，实际上就像在页面中编写代码一样。只需调用onclick规范中的函数名即可。

不要将onclick设置为login.js，请确保.click值设置为函数名称，因此您的onclick应该是

<input type="button" value="Login" onClick="pasuser(< put parameter here )">

我假设您只想让onclick调用该函数。

<input type="button" value="Login" onClick="pasuser(<parameters>)">

如果我没有弄错，OnClick需要运行该函数。仅仅链接文件是不够的，因为你的浏览器不知道你想让它运行函数。试试这个：

<input type="button" value="Login" onClick="pasuser(form)">

好吧，你要做的是调用函数而不是js。所以代码应该看起来像这个

<center>
    <input type="button" value="Login" onClick="pasuser(form)">
</center>
相关文章：