Javascript 如何显示数组中的随机项？

大家好，这是一款教用户如何回收的迷你游戏。在屏幕截图中，用户需要点击黑洞，以便在黑洞内一个接一个地显示随机项目（我尝试附加它，但我不知道以前应该创建什么）。我对如何实现这一目标感到困惑。我所拥有的似乎还不够。我欣赏解决方案和技巧。谢谢你阅读我的帖子

---

更新：因此Elliot提供的代码正在运行。但是由于某些原因，新创建的+随机图像没有像素！我尝试用css中的className指定新的宽度和高度+z索引，但这也没有任何作用。我希望这不是一个复杂的问题来解决T.T

这是如何从数组中获取项

var items    = ['imgs/garbagebag.svg', //[0]
               'imgs/straw.svg', // [1]
               'imgs/utensil.svg', // [2]
               'imgs/chipbag.svg', // [3]
               'imgs/eggs.svg', // [4]


               'imgs/glasscup.svg', //[5]
               'imgs/ketchupbottle.svg', //[6]
               'imgs/jamjar.svg', //[7]
               'imgs/milkbottle.svg', //[8]
               'imgs/popbottle.svg', //[9]


               'imgs/eggshell.svg', //[10]
               'imgs/apple.svg', //[11]
               'imgs/banana.svg', //[12]
               'imgs/teabag.svg', // [13]
               'imgs/leave.svg', // [14]


              'imgs/jug.svg', // [15]
              'imgs/tetrapak.svg', // [16]
              'imgs/container.svg', // [17]
              'imgs/plasticbottle.svg', // [18]
              'imgs/can.svg', //[19]

              'imgs/newspaper.svg', //[20]
              'imgs/cerealbox.svg', // [21]
              'imgs/book.svg', // [22]
              'imgs/cardboard.svg', // [23]
              'imgs/bag.svg' // [24]
]
// This is the black hole on the wall
var hole = document.getElementById("hole");
// starts functioning after 5 seconds
var start = setInterval(shuffle,5000);
// displays an random items from array one by one
function shuffle(){
    hole.addEventListener("click",function(){
    console.log("items");
    items[Math.floor(Math.random()*items.length)] 
});
}

---

稍微重新构造代码可能是值得的。看起来您正在对项目进行分组

var randItem = items[Math.floor(Math.random() * items.length)];

这为每个项目后面的元数据提供了更大的灵活性

然后您需要添加事件

var items = [{
    image: "imgs/garbagebag.svg",
    type: "paper"
}, {
    image: "imgs/straw.svg",
    type: "paper"
},
...]

下面是JSFIDLE上此代码的工作版本

看起来您可能遇到的问题是由于SVG的缩放。这里是一个与SVG一起工作的JSFIDLE

这是另一个版本，它使用了这个洞的背景图像

---

是否需要数组中的随机块？是否还需要

setInterval

？你想每5秒钟更改一次图像而不单击一次吗？@MihaiAlexandru Ionut我想在用户每次单击孔时显示随机图像。25件物品中的一件。@AliSheikhpour我确实需要它，因为在允许用户点击孔之前，我有一个3-2-1计数器。@JosephDoggie为什么要谢谢你~！非常感谢。“我想我写了同样的东西？”永俊荣是的，现在才看到。也许我们同时发布了：DWow，非常感谢您将我的代码重新构建到适用的阶段。因此，在我以与你相同的方式重建之后，我有几个问题。1.设置属性时，“变量图像”不是与“item.image”相同吗？您仍然使用“item.image”2。我得到了removeChild部分的一个错误，即play.js:147 Uncaught TypeError:未能在“节点”上执行“removeChild”：参数1不是“节点”类型。在showItem在showRandomItem在HTMLImageElement。但是当我删除它时，我没有得到任何错误，但是图像仍然没有显示。好的地方，我已经更新了示例以删除冗余代码。删除现有项目可能需要进行额外检查（我不确定它目前对您的工作方式）。如果检查页面，HTML是否会更改？我会做一个JSFIDLE并更新我的答案。好的！应用更改后，我没有收到任何错误。不幸的是，图像仍然没有显示，当我在addeventListenser中记录数组[items]时，我没有看到这些项目？我需要解析或字符串化它吗？再次感谢你！不，我不这么认为，请检查JSFIDLE以获得一个工作示例。你能提供一个它不起作用的例子吗？很难知道确切的问题。好的，我会的。让我今晚给你回信。我还有其他事情要处理。非常感谢。

var hole = document.getElementById("hole");

function showItem(item) {
    var img = document.createElement("img");
    img.setAttribute("src", item.image);
    // store type as data attribute so we can access it later
    img.setAttribute("data-type", item.type);
    if (hole.childNodes[0]) {
        hole.removeChild(hole.childNodes[0]);
    }
    hole.appendChild(img);
}

function showRandomItem() {
    var item = items[Math.floor(Math.random()*items.length)];
    showItem(item);
}

hole.addEventListener("click", function() {
    showRandomItem();
});