I've encountered a problem that has proven to be more complex than expected - I am struggling to find resources related to my specific question. My goal is to store 36 images from a folder on my computer into an array using Javascript. Below, you will find a condensed version of the relevant code snippets.
<!doctype html>
<head>
<style>
div#GameBoard {
position: absolute;
top: 66px;
left: 53px;
display: block;
margin: 10px;
padding: 10px;
border: ridge #7CFC00 15px;
width: 1007px;
height: 698px;
}
div#Flipper {
display: block;
position: relative;
background-color: #000;
}
<style>
<script lang="javascript">
var ImgArray = [[11-16][21-26][31-36][41-46][51-56][61-66]];
// pseudocode, where first digit represents row and second digit column number.
// Images in folder named accordingly like 11.png,12.png,21.png,
// also within the array.
function OnClickCard(path)
{
path || path ='C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages'
document.getElementById("Flipper").img.src = ImgArray.splice(Math.floor(Math.random() * ImgArray.length)[ImgArray];
}
</script>
<body>
<div id="GameBoard">
<div class="Tile" id="Flipper">
<img name ="11" src="blue-glass-tile.png" onclick="OnClickCard()"/>
</div>
</body>
</head>
</html>
I aim to store the 36 images within 'C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages' in an array, randomly select an index between 0-35 to change the image source in the div, and remove that index to avoid duplication.
However, the current situation yields no results. Despite clearing all errors in Firefox's developer console, nothing seems to be happening. I am unsure how to log errors or determine if an image has loaded. As I struggle with the randomizer logic, any assistance would be greatly appreciated as I strive to finish this task successfully.