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

【问题标题】：How to get a random element of array of images and display it如何获取图像数组的随机元素并显示它
【发布时间】：2023-03-07 16:34:01
【问题描述】：

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

<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

【问题讨论】：

@slacker When 如果我创建数组，这些图像的 src 会去哪里？在我尝试这样做并将图像直接放入数组之前，它不起作用。

标签： javascript arrays image display

【解决方案1】：

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

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>

【讨论】：

是的，您的评论帮助回答了我的问题，我也想出了如何输出图像。谢谢！

【解决方案2】：

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

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

然后使用您的随机选择器选择要显示的图像：

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

【讨论】：