Question

我想编写一个脚本，该脚本使用数组中指定的元素随机更改元素的图像源。我写了以下内容，但“目标”返回未定义？

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

问题出在这两行：

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

Math.random()返回0到1之间的浮点值。乘以length的{{1}}，您将得到0到options之间的数字，但不一定整数。

例如，如果options.length返回0.5，并且有7个选项，则Math.random将包含值random。

随后，使用非整数索引3.5只会返回options。您需要再次使这些值成为整数，例如通过使用undefined。

Answer 2

您正在尝试访问数组的浮点索引，这当然是未定义的。在建立索引之前使用Math.floor。

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

使用Javascript随机更改图像源

2 个答案: