How do I reference jQuery from my HTML/JavaScript application?

html, javascript, jquery, referenceerror, undefined

Solution

Your question is fairly unclear, but essentially, you just have to make sure jQuery is loaded before your code. So for instance:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>

or

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
// Your code
</script>

But not

<!-- Not like this -->
<script src="your-code.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Note the order of tags.

These tags do not need to be in the `head`, and in fact, putting them there is not best practice. They must be in `head` or `body`. Best practice barring a specific reason to do something else is to put them at the very end of `body`, e.g.:

<!-- site content here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="your-code.js"></script>
</body>
</html>

Problem

I keep getting `Uncaught ReferenceError: $ is not defined` error. I assume everything is ok and working. My JQuery code is inside my Javascript file. I assume that isn't how it works? Should I have a JQuery file? I have this inside the head of my HTML `<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>` This is my Javascript file: ``` function typing(id, sentence){ var result = $.Deferred(); var index=0; var intObject= setInterval(function() { document.getElementById(id).innerHTML+=sentence[index]; index++; if(index==sentence.length){ clearInterval(intObject); } }, 100); return result.promise(); } var sleep = function(ms) { var result = $.Deferred(); setTimeout(result.resolve, ms); return result.promise(); }; typing('container','Subject Name:').then(function() { return sleep(500); }).then(function() { return typing('container',' Hi') }); ``` Where did I go wrong?

Original source