Можете ли вы сказать мне, почему «неопределенный» появляется при рандомизации изображений по клику?

Question

Обзор:

Я создал бит jQuery, который рандомизирует (4) изображения в папке в массиве при . . Это работает, но я не могу отследить, почему «неопределенный» возвращается в строке URL-адреса изображения случайным образом, создавая неработающую ссылку на изображение.

Цель:

Я ищу способ сообщить моей функции, что есть только 4 изображения, и, конечно же, перестать случайным образом возвращать «неопределенное». Также было бы неплохо, если бы оно не повторяло одно и то же изображение дважды в два клика, но это выходит за рамки запроса, который я подозреваю, - если это так, игнорируйте.

Примечание: иногда приходится нажмите немного, чтобы сломать его.

Спасибо!

/* ======================================
	IMAGE RANDOMIZER Scripts 
	========================================= */	
jQuery(function($){ 
	// Array of Images 
	var myImages = [
		'nessie-icons_nessie-teal.svg',
		'nessie-icons_nessie-pink.svg',
		'nessie-icons_nessie-yellow.svg',
		'nessie-icons_nessie-light.svg'
	];
	
   // select a element with id="the-img-id"
    $('#imageRando').click(function() {
      var randomInt = Math.round(Math.random() * myImages.length-1      ); // Create random number
      this.src = 'https://nessiedrinks.wpengine.com/wp-content/themes/Divi-child/nessie-icons/'+myImages[randomInt]; // replace the src with the new img
    });
});

/* ========================================= 
IMAGE RANDOMIZER Styles
========================================== */
#imageRando {
	  width: 40%;
    text-align: center;
    margin: 0 auto;
    position: fixed;
    margin-left: 5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ========================================= 
IMAGE RANDOMIZER Markup
========================================== -->
<div class="social-wrap">
  <img id="imageRando" src="https://nessiedrinks.wpengine.com/wp-content/themes/Divi-child/nessie-icons/nessie-icons_nessie-teal.svg" />
</div>

Answer 1

Ваша реализация рандомизатора (Math.round(Math.random() * myImages.length-1)) иногда возвращает -1. Это приводит к получению доступа к индексу -1 массива myImages, который равен undefined.

. То, что вы хотите - Math.floor(Math.random()*myImages.length). Это приведет к индексам от 0 до 3 для вашего массива myImages длины 4. Это потому, что Math.random возвращает 0 к 1 (0 включительно и 1 исключительно).