Need bit of help to make memory-game, as I am trying to click element to show and open, compare inner html and if equal add the class match to keep two elements opened BUT when i click (element) card it throws error of "uncaught TypeError: cannot read property classList of undefined at HTMLLIElement .cardClick" which i dont know how to rectify, any help will be appreciated. Thanks. Complete code at https://codepen.io/ma-halepoto/pen/OwEqNr
window.onload = function () {
let openedCards = [];
matchedCards = [];
//currentCard = [];
//previouseCard= 0 ;
moveCount = 0 ;
restart = document.getElementsByClassName ('restart');
modal = document.getElementById('myModal');
span = document.getElementsByClassName('close')[0];
displayCards = [];
openedCardsLength=null;
// console.log (restart); just to see if restart works
restart[0].addEventListener ('click', function (){
location.reload();
})
// console.log("It's loaded!") to check if this works
const cards = ['fa-diamond','fa-diamond', 'fa-paper-plane-o','fa-paper-plane-o', 'fa-anchor', 'fa-anchor', 'fa-bolt', 'fa-bolt', 'fa-cube', 'fa-cube', 'fa-leaf', 'fa-leaf', 'fa-bicycle', 'fa-bicycle',
'fa-bomb','fa-bomb' ];
let shuffleCards = shuffle (cards);
// console.log (shuffleCards); to check if this works
let cardElements = document.getElementsByClassName('symbols');
// console.log (cardElements); to check if this works
for (i=0; i < cardElements.length; i++ ) {
cardElements[i].className = shuffleCards[i]+ ' fa symbols';
}
// initialising popup
function popup() {
modal.style.display = "flex";
document.getElementById('p1').innerHTML = 'You did it in '+ moveCount+ ' moves' + ' and ' + seconds+ ' seconds.';
}
// Closing popup by clicking x
span.onclick = function closeX () {
modal.style.display = "none";
}
// function close popup by clicking any where
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Stopwatch initialisation
let stopWatch = document.getElementById ('timer');
time = 0;
seconds=0
// start time
function startTime () {
time = setInterval ( function (){
seconds++;
stopWatch.innerHTML = seconds + ' s';
}, 1000);
}
// stop the time function
function stopTime () {
clearInterval (time);
}
displayCards = document.getElementsByClassName ('card');
console.log(displayCards);
// Click Event
function cardClick () {
openedCards = this;
openedCards.removeEventListener ('click', cardClick);
console.log (openedCards);
// openedCards[1].removeEventListener ('click', cardClick);
// updating move counts
let countMoves = document.getElementById ('moves');
moveCount++ ;
countMoves.innerHTML= moveCount;
console.log(countMoves);
// star ranking;
if ( moveCount === 20) {
let removeStar = document.getElementById('star3');
removeStar.style.display = 'none';
} else if (moveCount ===30) {
let removeStarTwo = document.getElementById ('star2');
removeStarTwo.style.display = 'none';
}
// start stopwatch at the first click.
if ( moveCount ===1) {
startTime ();
}
//function clickedCards () {
//openedCards.push(this);
openedCardsLength = openedCards.length;
Error here
openedCards[0].classList.add('open','show');
openedCards[1].classList.add('open', 'show');
console.log (openedCards[0]);
console.log (openedCards[1]);
console.log (openedCardsLength);
if (openedCardsLength ===2) {
if (openedCards[0].type === openedCards[1].type){
openedCards[0].classList.add('match');
openedCards[1].classList.add('match');
} else {
openedCards[0].classList.remove('open','show');
openedCards[1].classList.remove('open','show');
openedCards[0].addEventListener ('click', cardClick);
openedCards[1].addEventListener ('click', cardClick);
}
}
}
// event listener function
for (i=0; i < displayCards.length; i++) {
displayCards[i].addEventListener('click', cardClick);
}
}`
