无法将classList属性添加到数组的索引

Question

需要一点帮助来制作记忆游戏，因为我试图单击要显示和打开的元素，比较内部html，如果相等，则添加类匹配项以保持两个元素在我单击（元素）卡时都打开，但会抛出异常错误“ 未捕获的TypeError：无法读取HTMLLIElement .cardClick 上未定义的属性classList”，我不知道如何纠正它，将对您有所帮助。谢谢。 完整的代码位于 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（'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);

        }

     }`