this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="memory.css" rel="stylesheet">
<title>Memory Game</title>
</head>
<body>
<h1 id="test"></h1>
<button id="start-btn">Start</button>
<div id="cards">
<div id='card-1' class="image-div"><img class="empty-image"></div>
<div id='card-2' class="image-div"><img class="empty-image"></div>
<div id='card-3' class="image-div"><img class="empty-image"></div>
<div id='card-4' class="image-div"><img class="empty-image"></div>
<div id='card-5' class="image-div"><img class="empty-image"></div>
<div id='card-6' class="image-div"><img class="empty-image"></div>
<div id='card-7' class="image-div"><img class="empty-image"></div>
<div id='card-8' class="image-div"><img class="empty-image"></div>
</div>
<div id="image-possibilities">
<img id='seer' hidden src="Seer_1.webp">
<img id='gibby' hidden src="gibby_1.jpg">
<img id='bloodhound' hidden src="bloodhound.jpg">
<img id='horizon' hidden src="horizon_1.jpg">
</div>
<button id="reset-btn">Reset</button>
<script src= "scripts.js"></script>
</body>
</html>
and this is my javascript
const test=document.getElementById('test')
const startBtn=document.getElementById('start-btn');
const card1=document.getElementById('card-1');
const card2=document.getElementById('card-2');
const card3=document.getElementById('card-3');
const card4=document.getElementById('card-4');
const card5=document.getElementById('card-5');
const card6=document.getElementById('card-6');
const card7=document.getElementById('card-7');
const card8=document.getElementById('card-8');
const gibby=document.getElementById('gibby');
const bloodhound=document.getElementById('bloodhound');
const seer=document.getElementById('seer');
const horizon=document.getElementById('horizon');
const emptyImages=document.querySelectorAll('.empty-image');
let imageArray=[bloodhound,bloodhound,seer,seer,horizon,horizon,gibby,gibby];
const cardArray=[card1,card2,card3,card4,card5,card6,card7,card8];
const testImage=document.getElementById('test-image');
const resetBtn=document.getElementById('reset-btn');
let compareImageArray=[]
let pairedImages=[]
const shuffleCards=()=>{
for(let i =0;i<emptyImages.length;i++){
let randomIndex=Math.floor(Math.random()*(8-i))
emptyImages[i].src=imageArray[randomIndex].src;
imageArray.splice(randomIndex,1);}
}
shuffleCards()
let count=0;
for(let i=0;i<cardArray.length;i++){
if(eventListenerEnabled){
cardArray[i].addEventListener('click',(event)=>{
let selectedImage=event.target.firstElementChild
selectedImage.style.display='block';
compareImageArray.push(selectedImage)
test.innerText=compareImageArray
count+=1;
if(compareImageArray[0].src===compareImageArray[1].src){
pairedImages.push(compareImageArray[0],compareImageArray[1]);
compareImageArray=[];
}
if(count>=2){
setTimeout(()=>{
emptyImages.forEach((image)=>{
image.style.display='none'
})
},2000)
count=0;
compareImageArray=[]
pairedImages.forEach((pair)=>{
pair.style.display='block'
})
}
})
}}
resetBtn.addEventListener('click',()=>{
test.innerText='fuck'
imageArray=[bloodhound,bloodhound,seer,seer,horizon,horizon,gibby,gibby];
pairedImages=[];
compareImageArray=[];
count=0;
emptyImages.forEach((img)=>{
img.style.display='none'
})
shuffleCards()
})
the file name is accurate and they’re in the same folder… I’m so confused what’s happening please help
