I'm trying to create a small memory card game as a beginner project.
Page structure + goal:
- There are 6 cards and 2 buttons in total.
- Goal: If you click on the reset button, it should change the src of the images.
Problem:
- When you click on the reset button, sometimes the swapped img disapper, and gives the following error in Chrome's Dev tool / console: GET http://127.0.0.1:5500/Szorgalmi/Projects/undefined 404 (Not Found)
- When you click on the error, you can see the following: Image (async) RandomizeSrcOfImages@script.js:32
** Here is how my line 32 in the JS file looks like, with the function:**
let resetButton = document.querySelector('reset');
function RandomizeSrcOfImages() {
/* let revealAllImg = document.querySelectorAll('.images');
for (let i = 0; i < revealAllImg.length; i++) {
revealAllImg[i].style.display = "block";
}*/
let allImage = new Array();
allImage[1] = "elephant.png";
allImage[2] = "octopus.png";
allImage[3] = "melon.png";
let randomImage = Math.floor(Math.random() * allImage.length);
document.querySelector('#img1').src = allImage[randomImage];
document.querySelector('#img3').src = allImage[randomImage];
}
reset.addEventListener('click', RandomizeSrcOfImages);
What I've tried so far:
- Relocate all files to a different folder
- Added script type = "text/javascript" to the HTML
- Bunch of Googleing
Note: This error does NOT occur all times. I couldn't figure out why, but sometimes when the reset button is clicked it does the job, sometimes the error pops up.
I've looked up several stackoverflow posts, and searched on Google since yesterday, and still didn't find a solution.
Aucun commentaire:
Enregistrer un commentaire