El siguiente código muestra una imagen de una matriz al azar. He estado tratando de cambiarlo sin éxito para mostrar todas las imágenes de la matriz al azar. He usado un bucle while para generar la función aleatoria. La función aleatoria funciona y aleatoriza toda la matriz, pero solo se devuelve la imagen. Hay 8 imágenes en la matriz.
function DisplayImage(i) { let CardImage = document.createElement('img'); CardImage.src = `Images/${images[i].img}`; CardImage.alt = CardImage.src; document.querySelector("#box").appendChild(CardImage); }Gracias
¿Estás buscando algo como estos dos enfoques?
Para elegir aleatoriamente una sola imagen:
function DisplayImage(totalImages) { const i = Math.floor(Math.random() * totalImages) let CardImage = document.createElement('img'); CardImage.src = `Images/${images[i].img}`; CardImage.alt = CardImage.src; document.querySelector("#box").appendChild(CardImage); }O para aleatorizar todas las imágenes:
function shuffle(array) { let currentIndex = array.length, randomIndex; while (currentIndex != 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; } return array; } function DisplayImage(totalImages) { const items = [...Array(totalImages).keys()] const randomItems = shuffle(items) randomItems.forEach(item => { let CardImage = document.createElement('img'); CardImage.src = `Images/${images[item].img}`; CardImage.alt = CardImage.src; document.querySelector("#box").appendChild(CardImage); }) }