`$` is not defined. Uncaught reference error

Question

I'm new to JavaScript and JQuery. I am facing this problem where the browser is detecting that $ is not defined. I have seen a lot of solutions to this problem. But turns out none of them are working for me. In my HTML, I'm loading the jquery library from my local directory, before calling my script.

Directory that contains the jquery library and the script

HTML header where I'm loading the scripts

DOM error that the browser shows me every time I load the page

Somehow, I'm not able to find a solution to this error. Your help is very much appreciated. Thank you for your time and efforts.

Answer 1

You need to remove async from your script tags, as this is essentially loading and running those files in parallel, meaning your script.js file could be running before your jquery files are even loaded.

Also, you don't need to load both the minified and unminified versions of jQuery. Just load the minified version.