Невозможно добавить свойство classList к индексу массива

Нужна помощь в создании памяти, так как я пытаюсь щелкнуть элемент, чтобы показать и открыть его, сравнить внутренний html и, если он равен, добавить совпадение классов, чтобы два элемента были открыты, НО, когда я щелкаю (элемент) карточку, он выдает ошибку "uncaught TypeError: невозможно прочитать свойство classList undefined в HTMLLIElement.cardClick", которое я не знаю, как исправить, любая помощь будет оценена. Благодарю. Полный код на 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;

Ошибка здесь

openedCards[0].classList.add('открытый','шоу');

openCards[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);

        }

     }`

0 ответов

Другие вопросы по тегам