array.classList.remove（）不起作用-> Uncaught TypeError：无法读取未定义的属性“ remove”

Question

在下面的代码中，我无法使用classList.remove()，因为该数组未定义，但是为什么呢？

底部ListofOpenCards[0].classList.remove("show"," open");附近的行是引发错误的那一行，这很奇怪，因为行ListofOpenCards中紧接之前的同一数组ListofOpenCards[0] += " match";在起作用。请帮助我理解。谢谢

// Create a list that holds all of your cards
var cardList2 = ["fa-diamond","fa-diamond","fa-diamond","fa-diamond","fa-paper","fa-paper","fa-anchor","fa-anchor","fa-bolt","fa-bolt","fa-cube","fa-cube","fa-leaf","fa-leaf","fa-bicycle","fa-bicycle","fa-bomb","fa-bomb"];

/*
 * Display the cards on the page
 *   - shuffle the list of cards using the provided "shuffle" method below
 *   - loop through each card and create its HTML
 *   - add each card's HTML to the page
 */
var displayCards = document.querySelector(".testCardDisplay");
/*displayCards.appendChild(cardList)*/

function createNewCardList(cardlist){

  var ulCreation = document.createElement('ul');
  ulCreation.className = "";

  for ( i = 0; i < cardlist.length; i++ ){  
    var liCreation = document.createElement('li');
    liCreation.className = "card";
    /*liCreation.innerHTML = cardlist[i];  oldWorkingVersion*/
    /*liCreation.innerHTML = <i class="fa cardlist[i]"></i>;*/

    var iCreation = document.createElement('i');
    iCreation.className = "fa ";
    iCreation.className += cardlist[i];
    liCreation.append(iCreation);

    ulCreation.append(liCreation);
    ulCreation.className = "deck";
  }

  /*var ulDock = document.getElementsByClassName("testCardDisplay");*/
  var ulDock = document.getElementById("testCard69");
  ulDock.parentNode.replaceChild(ulCreation, ulDock);

};


// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;

    while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}

function shuffleAlert() {
    setTimeout(function(){ alert("Cards have been reshuffled"); }, 0);
}

/*
 * set up the event listener for a card. If a card is clicked:
 *  - display the card's symbol (put this functionality in another function that you call from this one)
 *  - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
 *  - if the list already has another card, check to see if the two cards match
 *    + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
 *    + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
 *    + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
 *    + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
 */

/*document.getElementsByClassName("fa").addEventListener("click",checkStatus);*/
var clickedCard = document.getElementsByClassName("card");
console.log(clickedCard.length+"pre")

var currentCard ;
let ListofOpenCardskids = [];
let ListofOpenCards = [];
let currentCounterVal = 0;


var parentOfClick = document.querySelector(".deck");

parentOfClick.addEventListener("click", afterClick,false);

function afterClick(e){
  if (e.target !== e.currentTarget){
    var clickedItem = e.target.children[0].className;
    console.log("clickedItem:" + clickedItem);
    console.log("eTargetClassname:" + e.target.className);
    /*e.target.className += " open show";*/
    displayCard(e);
    checkIfInList(e);
    counterWatch()
    console.log("counterwatch"+currentCounterVal);
  }
  e.stopPropagation();
}

function displayCard( currentCard){
  currentCard.target.className += " open show";
  console.log("singleCurrentCardClassname :"+currentCard.target.className);
};

function checkIfInList(currentCard){

  ListofOpenCardskids.push(currentCard.target.children[0].className);  
  ListofOpenCards.push(currentCard.target.className);

  console.log("ListofOpenCardskids :"+ ListofOpenCardskids[0] +" "+ ListofOpenCardskids[1]);
  console.log("ListofOpenCardsTEST::"+ ListofOpenCards);

  if (ListofOpenCardskids[0] === ListofOpenCardskids[1]){
    console.log("same two values in ListOfOpenCardArray")
    /*keepCardsopen;*/
    ListofOpenCards[0] += " match";
    ListofOpenCards[1] += " match";
    ListofOpenCards[0].classList.remove("show"," open");
    ListofOpenCards[1].classList.remove("show","open");

  } else {}

};


function counterWatch (){
  currentCounterVal += 1;
};

/*
function coverCards( ListofOpenCardsP ){

  ListofOpenCardsP[0].target.className.removeClass(" open show");
  ListofOpenCardsP[1].target.className.removeClass(" open show");
}
*/