随机图像和配对文本选择javascript

Question

当人们在输入框中上传图片时，我会向他们显示图像和文本。

我想把图片和文本作为一对显示给他们，但应该在池中随机挑选。

所以，简单地说，

人们把他们的照片上传到输入框。

池中匹配的图像和文本中的一个随机出现在他们面前。

请给我一些建议。我被困在这里一个星期了！！

function randomImg(){
var quote = [
{
text: "1",
img: "Img/1.jpg"},

{
text: "2",
img: "Img/2.jpg"},

{
text: "3",
img: "Img/3.jpg"},

{
text: "4",
img: "Img/4.JPG"},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'<img src="' + quote.img + '">';
}

<p>
<input class="Randombutton" style="float: left;" type="button" 
value="Randomize" onclick="randomImg()">
</p>

Answer 1

您的解决方案中似乎有一些拼写错误：

1. 您缺少一个ID为"的元素；引用"；。在下面的解决方案中，我放置了一个div作为占位符，但您可以使用任何您想要的内容
2. 在randomImg函数中，您的数组被称为quote，但您稍后会从quotes中查找文本和图像URL(带有s(

修复这两个问题会将图像和文本更新为数组中的伪随机元素。

这些类型的错误会显示在浏览器的开发工具中，所以我建议也检查一下！

<div>
<input class="Randombutton" style="float: left;" type="button" value="Randomize" onclick="randomImg()">
</div>
<br />
<div id="quote"></div>
<script>
function randomImg() {
var quotes = [{
text: "1",
img: "Img/1.jpg"
},
{
text: "2",
img: "Img/2.jpg"
},
{
text: "3",
img: "Img/3.jpg"
},
{
text: "4",
img: "Img/4.JPG"
},
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'<img src="' + quote.img + '">';
}
</script>