使用 Javascript 以隨機順序更改圖像源

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>

爪哇腳本

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 之間的浮點值。乘以options的length ，您將得到介於 0 和options.length之間的數字，但不一定是整數。

例如，如果Math.random返回 0.5，並且有 7 個選項，則random將包含值3.5 。

隨后，具有非整數的索引options將簡單地返回undefined 。 您需要再次使這些值積分，例如通過使用Math.floor 。

Answer 2

您正在嘗試訪問數組的浮點索引，這當然是未定義的。 在索引之前使用Math.floor 。

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