ReferenceError: jQuery is not defined in self invoking function

Question

I've tried all the solutions from other Stackoverflow topics, but I can't my jQuery file to work. I use a Wampserver to test my code and I test inside of multiple browsers (Firefox, Chrome, Opera). Same problem every time.

HTML <script src="js/scripts.js"></script> <script src="js/jquery-3.2.1.min.js"></script>

I've put these lines before my closing <\\body> tag

scripts.js`

(function($) {
'use strict';

// holds current image shown
var $currNr = 0;
var links, images;

/**
 * Function to prevent closures; adds click event handler to links
 */
var addEvents = function(nr) {
    // add click event to link
    $(links[nr]).on('click', function(e) {
        showImage(nr);
        e.preventDefault();
    });
};

/**
 * Function to show an image
 */
var showImage = function(nr) {
    // find image
    var $img = $(images[nr]);
    if (!$img) return;

    // find big image
    var $photoBig = $('#photoBig');

    // change
    $photoBig.attr('src', $img.attr('data-src-l'));
    $photoBig.attr('alt', $img.attr('alt'));

    // remember current image number
    $currNr = nr;
};

/**
 * Function to show the next image
 */
var showNextImage = function() {
    if ($currNr != (links.length - 1)) {
        showImage($currNr + 1);
    } else {
        showImage(0);
    }
};

/**
 * Function to show the previous image
 */
var showPrevImage = function() {
    if ($currNr != 0) {
        showImage($currNr - 1);
    } else {
        showImage(links.length - 1);
    }
};

// start scripts
$(window).on('load', function() {
    // find images and links
    links = $('#thumbsmenu li>a');
    images = $('#thumbsmenu li>a img');

    // add link events
    $(links).each(function(nr) {
        $(this).on('click', function(e) {
            showImage(nr);
            e.preventBubble();
        });
    });


    // controls
    $('#lnkFirst').on('click', function(e) {
        showImage(0);
        e.preventDefault();
    });
    $('#lnkPrev').on('click', function(e) {
        showPrevImage();
        e.preventDefault();
    });
    $('#lnkNext').on('click', function(e) {
        showNextImage();
        e.preventDefault();
    });
    $('#lnkLast').on('click', function(e) {
        showImage(images.length - 1);
        e.preventDefault();
    });

    // keyboard
    $(document).on('keydown', function(e) {
        var $code = (e.keyCode ? e.keyCode : e.which);
        switch (event.keyCode) {
            case 37: showPrevImage(); e.preventDefault(); break;
            case 39: showNextImage(); e.preventDefault(); break;
        }
    });

    // play
    var $timer;
    $('#btnPlay').on('click', function(e) {
        if (!$(this).prop('playing')) {
            $(this).val('stop');
            $(this).prop('playing', true);
            $currNr = 0;
            $timer = setInterval(showNextImage, 1000);
        } else {
            $(this).val('start');
            $(this).prop('playing', false);
            clearInterval($timer);
        }
    });

});})(jQuery);`

I use a self-invoking function and use it as parameter but I get a:

ReferenceError: jQuery is not defined

Normally this code should work, that was how I was taught back then. Anyone an idea what could be the real issue here?

Answer 1

You are loading scripts.js before jQuery

Change the following code:

<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>

To:

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>

Answer 2

Your script load ordering is wrong. Load jQuery first, then use it.

Answer 3

As other people suggested your order is wrong. In order for you to use JQuery in other script files it needs to be fully loaded. Change your HTML like so:

<script src="js/jquery-3.2.1.min.js"></script>    
<script src="js/scripts.js"></script>