jQuery to load random image from array using chickendinner js returning undefined in Chrome

Question

I have the following jQuery script setup using the info pages from the developer's site, but Chrome keeps returning 'undefined'.

<script src="//code.jquery.com/jquery-1.11.2.min.js""></script>

(function($) {
    $('.js-chickendinner-bg').chickenDinner = {
        defaults: {
            path: 'http://127.0.0.1:4000/covers/',
            altTag: ['Cover'],
            fadeInTime: 1800,
            cssBG: 'true',
            TheImages: ['cover1.jpg', 'cover2.jpg', 'cover3.jpg', 'cover4.jpg', 'cover5.jpg', 'cover6.jpg', 'cover7.jpg', 'cover8.jpg', 'cover9.jpg', 'cover10.jpg', 'cover11.jpg', 'cover12.png', 'cover13.png', 'cover14.png']
        }
    };

    $.fn.extend({
        chickenDinner: function(options) {
            $.extend({}, $.chickenDinner.defaults, options);
            return this.each(function() {
                var TheImages = options.TheImages;
                var RandomMath = Math.floor(Math.random() * TheImages.length);
                var SelectedImage = TheImages[RandomMath];
                var imgPath = options.path + SelectedImage;
                var altTag = options.altTag;
                // Fade in Times
                var fadeInTime = options.fadeInTime;
                //Fade In animation - hide first
                $(this).css('display', 'none').fadeIn(fadeInTime);
                if (options.cssBG == 'true') {
                    $(this).css('background-image', 'url(' + imgPath + ')');
                } else {
                    $(this).attr({
                        src: imgPath,
                        alt: altTag
                    });
                }
            });
        }
    });
}(jQuery));

<div class="site-header-container has-cover" class="js-chickendinner-bg" style="background-image: url({{ site.cover | prepend: site.baseurl }});">
  <div class="scrim {% if site.cover %}has-cover{% endif %}">
    <header class="site-header">
      <h1 class="title">{{ site.title }}</h1>
      {% if site.subtitle %}
      <p class="subtitle">{{ site.subtitle }}</p>{% endif %}
    </header>
  </div>
</div>

 Run code snippet

Expand snippet

I want to use this script to randomize image loads on my website's homepage, built with and served by Jekyll (hence the local server for testing above).

It is my understanding that the div class="js-chickendinner-bg" should work with the jQuery function the way I have it, but something is still apparently off.

Answer 1

It's because you're choosing a random number from the length of your array, but the array index starts at 0. In your case the random number will be between 1 and 14, but your array index range will be from 0 to 13. Due to that your random number will sometimes be greater than the highest index of your array.

If you modify this line to subtract 1 from the random value:

var RandomMath = Math.floor(Math.random() * TheImages.length) - 1;

That will prevent your random value from being too large.