[SOLVED] How to solve ''Uncaught ReferenceError: $ is not defined' when $(document).ready

How to solve ''Uncaught ReferenceError: $ is not defined' when $(document).ready

I am getting this 'Uncaught ReferenceError: $ is not defined' error when running my site on the browser, while in Visual Studio I am not receiving any advice. I tried to find a solution in the documentation but it didn't work.

How can I solve that issue?

Here is the code (without CSS):

HTML:

<head>
    <link rel="stylesheet" href="/a-number-animation-saved/style.css"/>
</head>

<script src="/a-number-animation-saved/script.js"></script>

<h1>Numbers Increment Animations</h1>
  <div class='counter-box' id="counts">
    <div class='col-4'>
      <span class="counter" data-from="0" data-to="2059"> 2059 </span>
      <h4> clients </h4>
    </div>
    <div class='col-4'>
      <span class="counter" data-from="0" data-to="3063"> 3063 </span>
      <h4> ideas </h4>
    </div>
    <div class='col-4'>
      <span class="counter" data-from="0" data-to="2078"> 2078 </span>
      <h4> projects </h4>
    </div>
  </div>

JAVASCRIPT:

$(document).ready(function () {
  
    var counters = document.querySelectorAll('span.counter'),     // numbers
        len =  counters.length,                                   // numbers quantity
        duration = 5000;                                          // Animation in ms
  
    // Custom easing function
    $.extend($.easing, {
      // This is ripped directly from the jQuery easing plugin (easeOutExpo), from: http://gsgd.co.uk/sandbox/jquery/easing/
      easing: function (x, t, b, c, d) {
        return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
      }
    });
      
    // Function that changes opacity of numbers to 0
    function opacity() {
      var i;
  
      for (i = 0; i < len; i ++) {
        counters[i].style.opacity = 0;
      }
      
    }
      
    // Animation
    function animate() {
      var x, number;
  
      if (len !== 0) {
        len -= 1;
      }
  
      x = counters[len];
      number = 'number' + len;
  
      // Opacity
      $(counters[len]).animate({opacity : 1}, {
        duration: duration,
        fade: true,
        easing: 'linear'
      });
  
      // Numbers
      $({number: counters[len].getAttribute('data-from')}).animate({number: counters[len].getAttribute('data-to')}, {
        duration: duration,
        easing: 'easing',
        fade: true,
        queue: false,
        step: function (a) {
          a = Math.round(a);                                      //the value of a number rounded
          a = String(a);                                          //convert a number to a string
          a = a.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');    //thousands separator
  
          $(x).html(a);
        }
      });
    }
  
    function showAnimation() {
      opacity();
  
      var i;
  
      // Start the animation function
      for (i = 0; i < 3; i += 1) {
        animate(i);
      }
    }
    
    showAnimation();
    
  });

Solution

Using jQuery?

You have to put jQuery above you script

EXAMPLE

/* in js file */
$(document).ready( () => {
  alert();
});

<!-- in html -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<script type='text/javascript' src='/path/to/script.js'></script>