如何顯示數組中的隨機項？

Question

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)] 
});
}

嗨，所以這是一個教會用戶如何回收的迷你游戲。 在屏幕截圖中，用戶需要點擊黑色間隙/洞以便在黑洞內逐個顯示隨機項目（我嘗試附加它但我不知道我之前應該創建什么）。 我對如何實現這一點感到困惑。 我所擁有的似乎還不夠。 我很感激解決方案和提示。 感謝您閱讀我的帖子。

更新：所以Elliot提供的代碼正在運行。 但由於某些原因，新創建的+隨機圖像沒有像素！ 我嘗試在css中使用className分配新的寬度和高度+ z-index，但這也沒有做任何事情。 我希望這不是解決TT的復雜問題

Answer 1

稍微重構代碼可能是值得的。 看起來你正在對你的物品進行分組。

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

這使您在每個項目后面的元數據中具有更大的靈活性。

然后你需要添加事件

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();
});

這是JSFiddle上此代碼的工作版本

https://jsfiddle.net/nxc5zpen/

看起來您可能遇到的問題是由於SVG擴展。 這是一個有SVG的JSFiddle。

https://jsfiddle.net/Lhot76gm/1/

這是另一個使用孔的背景圖像的版本。

https://jsfiddle.net/j6373mvv/1/

Answer 2

這是如何從數組中獲取項目

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