He estado tratando de mostrar las imágenes de gatos en orden aleatorio desde la matriz superior. Mis click4pics no funcionan con el código que se muestra, recibo un mensaje de que no se pueden encontrar las imágenes, sin embargo, cuando cambio la fuente de la imagen para cargar solo una imagen, la función funciona ¿También el camino correcto con esto?
const cat$Images = [ { name: "C1", img: "C1.jpg", }, { name: "C2", img: "C2.jpg", }, { name: "C3", img: "C3.jpg", }, { name: "C4", img: "C4.jpg", }, ] let PicturePairs = [ { name: "C1", img: "C1.jpg", name: "C2", img: "C2.jpg", }, ]; console.log(PicturePairs) console.log(cat$Images) 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] ]; } } shuffle(cat$Images) shuffle(PicturePairs) let clickImage = document.querySelector("#button") clickImage.addEventListener("click",click4pics) function click4pics(i) { let catpics=document.createElement("img") catpics.src=`images/${cat$Images[i].img}`; catpics.alt = cat$Images.src; document.querySelector("#box").appendChild(catpics); catpics.addEventListener("click", function(e) { console.log(e.target.src); }) } click4pics(0) click4pics(1) click4pics(2) click4pics(3)El primer parámetro de cualquier función que se utilice como controlador de eventos es el "evento" en sí. Entonces, si agrega un archivo console.log(i) al comienzo de la función "click4pics", luego intente hacer clic en el botón, encontrará que la "i" es el objeto del evento. Para arreglar eso, puede usar un bucle en lugar de pasar un parámetro.
function click4pics() { for (let i = 0; i < cat$Images.length; i++) { let catpics = document.createElement("img") catpics.src = `images/${cat$Images[i].img}`; catpics.alt = cat$Images.src; document.querySelector("#box").appendChild(catpics); catpics.addEventListener("click", function (e) { console.log(e.target.src); }) } }Si su objetivo es volver a generar las imágenes aleatorias cada vez que se hace clic en el botón, coloque todo el inicio de sesión dentro de la función "click4pics". Y antes de regenerar los elementos de las imágenes, asegúrese de vaciar primero el "#box".
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] ]; } } let clickImage = document.querySelector("#button") clickImage.addEventListener("click", click4pics) function click4pics() { const cat$Images = [ { name: "C1", img: "C1.jpg", }, { name: "C2", img: "C2.jpg", }, { name: "C3", img: "C3.jpg", }, { name: "C4", img: "C4.jpg", }, ] let PicturePairs = [ { name: "C1", img: "C1.jpg", name: "C2", img: "C2.jpg", }, ]; shuffle(cat$Images) shuffle(PicturePairs) document.querySelector("#box").innerHTML = ''; // empty it each time for (let i = 0; i < cat$Images.length; i++) { let catpics = document.createElement("img") catpics.src = `images/${cat$Images[i].img}`; catpics.alt = cat$Images.src; document.querySelector("#box").appendChild(catpics); catpics.addEventListener("click", function (e) { console.log(e.target.src); }) } } click4pics() <div id="box"></div> <button id="button">btn</button>Si tiene problemas con las rutas de las imágenes, asegúrese de tener una carpeta llamada "imágenes" al mismo nivel que su archivo Html y coloque las imágenes dentro.