ReferenceError: $ is not defined [jQuery or Bootstrap]

Question

Hi. I got the error above. organizatioin/orgcration.js:2: ReferenceError: $ is not defined. I belive it has to do with jQuery or Bootstrap, as I'm following a tutorial that tells me to install those plugins.

Here's the whole code in orgcreation.js:

$('#orgButton').click(() => {
    mp.trigger('orgCreation', $('#orgName').val(), $('#orgAbb').val());
});

It appears not to recognize the '$' symbol. I don't understand why, as I have installed both jQuery and Bootstrap. Here's my 'node_modules' folder:

Any ideas on what might be wrong? The 'organizations' folder looks like this:

And the 'Dependences' folder insite it like this:

The html.html code where the event is triggered has just this code:

<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" href="common.css"></head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <body>
        <div class="org-bar">
            <h1 style="font-size:20px;">Criar Organização</h2>
            <form id="orgCreation" action="welcome.php" method="post"></form>>
                <label for="orgName"></label>
                <input class="textInput" type="text" id="orgName" name="orgName" placeholder="Nome da Organização [5-20]" minlength="5" maxlength="20">
                <label for="orgAbb"></label>
                <input class="textInput" type="text" id="orgAbb" name="orgAbb" placeholder="Abreviatura da Organização [3-4]" minlength="3" maxlength="4">
                <input class="button" type="button" id="orgButton" value="Criar">
                </div>
            </form>
        </div>
            <script src="orgcreation.js" type="text/javascript"></script>
    </body>
</html>

I don't understand what's wrong. Any ideas on why '$' is not recognized?

@EDIT I changed the <head> to the below, but it still gives the same error:

<head>
        <link rel="stylesheet" href="common.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

You have to include jQuery as a ressource in your HTML as well:` — empiric, Sep 10 '20 at 11:18
Does this answer your question? [JQuery - $ is not defined](https://stackoverflow.com/questions/2194992/jquery-is-not-defined) — Filburt, Sep 10 '20 at 11:19

score 1 · Answer 1 · answered Sep 10 '20 at 11:19

1

Installing modules with npm puts them in the node_modules folder and makes them available to Node.js programs.

You don't have a Node.js program. You are running your code JS embedded in an HTML document which is running in a web browser.

You need to load jQuery using a <script> element

answered Sep 10 '20 at 11:19

Quentin

914,110
126
1,211
1,335

Hi. I added `` to the of html, but the same error keeps appearing. I followed: https://www.w3schools.com/jquery/jquery_get_started.asp – Hugo Almeida Sep 10 '20 at 11:24

ReferenceError: $ is not defined [jQuery or Bootstrap]

1 Answers1