JS scripts in external file: ReferenceError: function is not defined

Question

I have following problem: This is my register.html file with register scripts included

<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="[email protected]" 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>

Everything works ok, but i want to create js file with my function. I import my script in between head tags in register.html:

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

and move scripts from script tags in html to register.js file:

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")
        }
    })
}

Now if i click register button in console i have

ReferenceError: prepareRegisterData is not defined

Maybe You know what I missed here?

While looking at the page, press Ctrl+U to see the source code. Find the <script> tag and you should be able to click the src part. If you do that, does the browser show your script? (also: in the first snippet you have <script> below <body> but nothing is supposed to be below <body>). — user5734311
– user5734311, Commented Feb 11, 2020 at 11:16
you can also defer the script if you don't want to change the order, developer.mozilla.org/en-US/docs/Web/HTML/Element/script and w3schools.com/tags/att_script_defer.asp — JS Lover
– JS Lover, Commented Feb 11, 2020 at 11:19
@JSLover — The script just defines functions. There's no need to wait for the DOM to load before running the script. — Quentin
– Quentin, Commented Feb 11, 2020 at 11:25
Assuming there aren't errors generated in the console as the script is loaded (check!), the most likely explanation for the problem is that you just got the URL to the script wrong. Use the Network tab of the browser's developer tools to check. — Quentin
– Quentin, Commented Feb 11, 2020 at 11:26

mtmx · Accepted Answer · 2020-02-11 11:45:40Z

1

Ok, project structure is reason. I have my .js files under WEB-INF directory, now i have js directory above WEB-INF and everything works Thanks for help :)

answered Feb 11, 2020 at 11:45

mtmx

9871 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS scripts in external file: ReferenceError: function is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related