Изменить источник изображения с помощью Javascript в случайном порядке

Question

Я хочу написать скрипт, который случайным образом меняет источник изображения элемента с указанным в массиве.Я написал следующее, но "target" возвращает неопределенное значение?

HTML

<ul>
    <li><img src="http://www.placehold.it/20x20" /></li>
    <li><img src="http://www.placehold.it/20x20" /></li>
    <li><img src="http://www.placehold.it/20x20" /></li>
</ul>

JAVASCRIPT

let slideImages = [
   'http://www.placehold.it/100',
   'http://www.placehold.it/101',
   'http://www.placehold.it/103',
   'http://www.placehold.it/105',
   'http://www.placehold.it/99',
   'http://www.placehold.it/98',
   'http://www.placehold.it/96',
   'http://www.placehold.it/107'
]

let totalImages = slideImages.length;
let randomNo = Math.random() * totalImages;
let imageURL = Math.floor(randomNo)
let img = slideImages[imageURL];


let options = document.querySelectorAll('li');
let random = Math.random() * options.length;

let target = options[random];

var fadeImagesFn = (target, img) => {
   console.log(img, target);
}

    fadeImagesFn(img);

Answer 1

Вы пытаетесь получить доступ к индексу с плавающей точкой массива, который, конечно, не определен.Используйте Math.floor перед индексацией.

let options = document.querySelectorAll('li');
let random = Math.random() * options.length; // <- float
let target = options[random]; // <- array-like [ float ] = undefined

Answer 2

Проблема заключается в этих двух строках:

let random = Math.random() * options.length;
let target = options[random];

Math.random() возвращает значение с плавающей точкой от 0 до 1. Умноженное на length из options, вы получите числа от 0 до options.length, но не обязательно целые числа.

Например, если Math.random возвращает 0,5, и есть 7 опций, random будет содержать значение 3.5.

Впоследствии индексирование options с помощью нецелого числа просто вернет undefined. Вам необходимо снова сделать эти значения интегральными, например, используя Math.floor.