Error "Uncaught ReferenceError: $ is not defined"

Question

I began to study the "javascript".

in html source code

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button id="test_button">Test</button>
    <p id="test">Hello World</p>

    <!-- script -->
    <script src="test.js"></script>
</body>
</html>

in javascript source code

"use strict";

$(function() {
document.getElementById("test_button").onclick = test_click;
function test_click() {
    document.getElementById("test").innerHTML = "HI";
}
});

Where's wrong?

You need to load the jQuery library in if you're going to use the '$'. — Brandon, Oct 24 '16 at 16:25
Make sure you have jQuery loaded as suggested by James above. Fiddle:https://jsfiddle.net/j55bhbhk/ — Aakash Thakur, Oct 24 '16 at 16:28

score 4 · Answer 1 · answered Oct 24 '16 at 16:28

4

You need to include jQuery. Try adding this to your <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

answered Oct 24 '16 at 16:28

Elliot B.

14,589
9
70
99

score 1 · Answer 2 · answered Oct 24 '16 at 16:29

$ is an alias for the jQuery library. In this case, you don't need jQuery at all. You can just execute that IIFE (immediately-invoked function expression) and it should work fine.

"use strict";

(function() {
document.getElementById("test_button").onclick = test_click;
function test_click() {
    document.getElementById("test").innerHTML = "HI";
}
})();

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button id="test_button">Test</button>
    <p id="test">Hello World</p>

    <!-- script -->
    <script src="test.js"></script>
</body>
</html>

Error "Uncaught ReferenceError: $ is not defined"

2 Answers2

Linked