I've been trying to get the cat images displayed in random order from the top array. My click4pics doesn't work with the code that is shown, I get a message that the images cannot be found however when I change the image source to load only one image the function works Also the rightpath with this?
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)
The first parameter of any function that is used as an event handler is the "event" itself. So, if you add a console.log(i) at the beginning of the "click4pics" function, then try to click the button, you'll find that he "i" is the event object. To fix that, you may use a loop instead of passing a parameter.
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);
})
}
}
If you aim to re-generate the random images each time the button clicked, then put all the login inside the "click4pics" function. And before regenerating images' elements, make sure that you empty the "#box" first.
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>If you have issues with the images' paths, Make sure you have a folder called "images" at the same level as your Html file and put the images inside it.