javascript - 外部文件中的 JS 脚本：ReferenceError：未定义函数

问题描述

我有以下问题：这是我的 register.html 文件，其中包含注册脚本

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Customer registration</title>
    <script type="text/javascript" src="register.js"></script>
</head>
<body>



        <legend>Customer Registration</legend>
        <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4">
                <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label">Last Name</label>
            <div class="col-md-4">
                <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="email">Email</label>
            <div class="col-md-4">
                <input id="email" name="email" type="text" placeholder="example@example.com" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-4">
                <input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-8">
                <input type="button" value="Register" id="registerBtn" onclick="prepareRegisterData()" class="btn btn-info btn-block">
            </div>
        </div>



</body>
<script type="text/javascript">
    function prepareRegisterData() {
        let registerData = {
            firstname: $('#firstname').val(),
            lastname: $('#lastname').val(),
            email: $('#email').val(),
            password: $('#password').val()
        };
        register(registerData);
    }

    function register(data) {
        $.ajax({
            url: "http://localhost:8080/customer",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function() {
                alert("Successfully registered");
            },
            error: function() {
                alert("Registration error")
            }
        })
    }
</script>
</html>

一切正常，但我想用我的函数创建 js 文件。我在 register.html 的头标签之间导入我的脚本：

<script type="text/javascript" src="register.js"></script>

并将脚本从 html 中的脚本标签移动到 register.js 文件：

function prepareRegisterData() {
    let registerData = {
        firstname: $('#firstname').val(),
        lastname: $('#lastname').val(),
        email: $('#email').val(),
        password: $('#password').val()
    };
    register(registerData);
}

function register(data) {
    $.ajax({
        url: "http://localhost:8080/customer",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function() {
            alert("Successfully registered");
        },
        error: function() {
            alert("Registration error")
        }
    })
}

现在，如果我单击控制台中的注册按钮，我有

ReferenceError：prepareRegisterData 未定义

也许你知道我在这里错过了什么？

标签： javascripthtml

javascript - 外部文件中的 JS 脚本：ReferenceError：未定义函数

问题描述

解决方案

推荐阅读