如何获取图像数组的随机元素并显示它

Question

我试过这样做，但没有成功。我不确定这是否是正确的语法

<p id = "Person"></p>
var x = <img src="bob.jpg"  width = "500" height = "500">
var y = <img src="joe.jpg"  width = "500" height = "500">
var z = <img src="chad.jpg"  width = "500" height = "500">

尝试从数组中随机抽取一张图片

var myArray = [ x, y,  z ];

var randomNumber = myArray[Math.floor(Math.random()*myArray.length)];

那怎么显示呢？有没有别的文件。我应该使用什么？

document.getElementById("Person").innerHTML = randomNumber

Answer 1

在你的情况下，唯一改变的是图像名称，将其作为字符串存储在数组中会更容易。

var myArray = ['bob.jpg', 'joe.jpg', 'chad.jpg'];

然后使用随机选择器select图像显示如下：

var randomlySelectedImage = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById('Person').innerHTML = 
  `<img src="${randomlySelectedImage}" width="500" height="500" />`;

Answer 2

你可以试试这个简单的方法。

const myArray = ["bob.jpg", "joe.jpg", "chat.jpg"]
const randomImage = () => {
 const image = myArray[Math.floor(Math.random() * 3)]; // 0 -> 2
 console.log(image);
 document.getElementById("Person").innerHTML = `<img src="${image}" width="500" height="500" />`;
}

<button onClick="randomImage()">Random Image</button>
<p id = "Person"></p>

如何获取图像数组的随机元素并显示它

How to get a random element of array of images and display it

javascript

arrays

image

display