Error Uncaught ReferenceError is not defined at HTMLAnchorElement onclick

Question

I tried to show modal using jquery, but to no avail.

I've tried to rearrange my jquery place and researching through other questions but I can't find any answer to my problem.

Here's the button

<div class="col-sm-6">
    <a onclick="addmhsForm();" href="#" class="btn btn-success" data-toggle="modal"><span>Tambah Mahasiswa</span></a>
</div>

Here's where I place my script and jquery

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{asset('js/api.js')}}"></script>
    </body>
</html>

And here's my custom javascript

$(document).ready(function() {
    //Here's where I place ajax script
});

function addmhsForm() {
    $(document).ready(function() {
        event.preventDefault();
        $("#add-error-bag").hide();
        $('#addModal').modal('show');
    });
}

I expect the code to show the modal, alas what I find is an error message like this:

Uncaught ReferenceError: addmhsForm is not defined at HTMLAnchorElement.onclick

Answer 1

Hello,

With my limited understanding, I tried to bruteforce my way to solve this problem and turns out the culprit is a HTML tag namely

Textarea

This Problematic Code

<textarea type="text" class="form-control" name="alamat" id="alamat"/>

The Solve

<textarea type="text" class="form-control" name="alamat" id="alamat"></textarea>

Hope this work!!

Thank You!!

Comments

It work!..thanks man:)

---

Thank you it helped me

Answer 2

The most common reason behind the error "Uncaught ReferenceError: $ is not defined" is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you're executing the jQuery code only after jQuery library file has finished loading