Javascript 如何使用外部js文件在表单提交时调用函数_Javascript_Html_Css

Javascript 如何使用外部js文件在表单提交时调用函数

javascript html css

Javascript 如何使用外部js文件在表单提交时调用函数,javascript,html,css,Javascript,Html,Css,我想在用户提交表单时调用一个函数，以及如何使用外部JS脚本来实现这一点 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>teste</title> <link rel="stylesheet" type="text/css"

我想在用户提交表单时调用一个函数，以及如何使用外部

JS

脚本来实现这一点

index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>teste</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <link type="text/javascript" src="main.js">
        </head>
            <body>
                <h1 class="title">teste</h1>
                <form action="a()">
                    <input type="input1" class="input1" name="verb" id="verb" placeholder="Verb"/>
                </form>
            </body>
    </html>

您可以在表单的

onsubmit

事件上添加

event listener

，并且可以使用

script

标记添加外部脚本

示例：如何添加外部JS文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>teste</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="./main.js"></script>
    </head>
        <body>
           //.. html
        </body>
</html>

teste
提交

遵循此代码…

HTML文件

必须是

，最好是在您的

正文

标签关闭之前

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>teste</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="./main.js"></script>
    </head>
        <body>
           //.. html
        </body>
</html>

 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8">
     <title>teste</title>
     <link rel="stylesheet" type="text/css" href="style.css"> 
 </head>

 <body>
     <h1 class="title">teste</h1>
     <form >
         <input type="text" name="text" id="input" placeholder="Verb" />
         <input type="submit" onclick="a()">
     </form>
     <script src="./index.js"></script>
 </body>

 </html>

 function a() {
    
     alert('hello');
 }