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

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

Hi, so this is a mini-game that teaches users how to recycle. In the screenshot, users are required to click the black gap/hole in order to display the random items one by one inside the black hole (I tried appending it but I don't know what I should create before). I am befuddled on how to achieve this. What I have doesn't seem to be enough. I appreciate solutions and tips. Thank you for reading my post.

UPDATE: So the codes Elliot provided is working. But for some reasons, newly created + randomized images have no pixels! I tried assigning new width and height + z-index with className in css but that is not doing anything either. I hope this is not a complicated problem to solve TT

Answer 1

It might be worthwhile restructuring your code slightly. It looks like you are grouping your items.

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

This gives you a lot more flexibility in the meta data behind each item.

Then you need to add the events

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

Here is a working version of this code on JSFiddle

https://jsfiddle.net/nxc5zpen/

It looks like the issues you might be having are due to SVG scaling. Here is a working JSFiddle with SVGs.

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

And here is another version using background images for the hole.

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

Answer 2

这是如何从数组中获取项目

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