"Uncaught Reference Error: $ is not defined" error comes when compiling java script?

Question

  $(document).ready(function(){

     var hamburger = $(".hamburger");
     var line = $(".line");
     var menuOpen;

     function openMenu() //function used to open menu
     {
       menu.css("left", "0px");
       line.css("background", "#FFF");
       menuOpen = true;
      }

       function closeMenu() //closing the menu
      {
       menu.css("left", "-320px");
       line.css("background", "#BCAD90");
       menuOpen = false;
       }

       function toggleMenu(){ // toggle between opening ang closing menu
        if (menuOpen){
         closeMenu();
       } 
       else 
       {
        openMenu();
       }
       }

       hamburger.on({      //hamburger menu
        mouseenter: function(){
       openMenu();
       }
      });

      menu.on({  
       mouseleave: function(){
      closeMenu();
      }

      });

      hamburger.on({
       click: function(){
      toggleMenu();
      }
      })


     });

Above is the code snippet for both Javascript and HTML files, but after compiling the above code it shows the error message in the browser as "Uncaught Reference Error: $ is not defined".kindly resolve this error and suggest the necessary solution.

Answer 1

Add jQuery

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

Answer 2

The browser is unable to load JQuery library. It seems like you have missed the script for loading it.

Embed the following in your index.html

<script
 src="http://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>

Thanks