Javascript 翻转卡片HTML：单击时不会翻转或保持翻转

我正在制作扑克牌游戏，但当我点击它时，照片不会一直打开。我已经列出了在JS中需要做的事情，但是我似乎不知道如何将它们实现到我的HTML文件中。这些照片应该是随机出现的（就像典型的flipcard游戏），但是当我尝试在JS文件中添加一些其他功能时，突然之间，以前有效的随机功能不再有效

另外，我应该使用.card.open，以便在单击照片时照片保持打开状态。但是，当我将此函数添加到CSS文件时，单击函数不再工作

我提到了，因为这正是我想要我的代码的结果，但似乎什么都不起作用

代码笔在这里：

let cards=document.getElementsByClassName（“卡”）；
如果（卡片！==0）{
让卡_数组=[]；
for（设i=0；i{
firstCard.classList.remove（'flip'）；
secondCard.classList.remove（'flip'）；
重置板（）；
}, 1500);
}
功能板（）{
[hasFlippedCard，lockBoard]=[false，false]；
[firstCard，secondCard]=[null，null]；
}

正文{
背景颜色：灰色；
}
.卡片{
宽度：180px；
高度：200px；
位置：相对位置；
变换样式：保留-3d；
过渡：1s；
保证金：5px；
}
.卡正面，
.退卡{
宽度：100%；
身高：100%；
边界半径：8px；
位置：绝对位置；
背面可见性：隐藏；
变换：translateZ（0）；
}
.退卡{
背景颜色：橙色；
}
img{
宽度：170px；
高度：190px；
填充物：5px；
边界半径：8px；
}
.卡正面{
背景色：白色；
变换：旋转（180度）；
}
/*将被删除一次。卡。打开工作*/
.卡：活动{
变换：旋转（180度）；
}
.卡片容器{
显示器：flex；
柔性包装：包装；
}

这是一个开始

window.addEventListener("load", function() {
  document.querySelector(".card-container").addEventListener("click", function(e) {
    const tgt = e.target;
    const card = tgt.closest("div")
    if (card.classList.contains("card-front") || card.classList.contains("card-back")) {
      card.closest(".card").classList.toggle("flip")
    }
  });
})

let cards=document.getElementsByClassName（“卡”）；
如果（卡片！==0）{
让卡_数组=[]；
for（设i=0；i{
firstCard.classList.remove（'flip'）；
secondCard.classList.remove（'flip'）；
重置板（）；
}, 1500);
}
功能板（）{
[hasFlippedCard，lockBoard]=[false，false]；
[firstCard，secondCard]=[null，null]；
}
addEventListener（“加载”，函数（）{
document.querySelector（“.card container”）.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
常量卡=tgt.最近（“div”）
if（card.classList.contains（“卡前”）| | card.classList.contains（“卡后”））{
卡片。最近的（“.card”）。类列表。切换（“翻转”）
}
});
})

正文{
背景颜色：灰色；
}
.卡片{
宽度：180px；
高度：200px；
位置：相对位置；
变换样式：保留-3d；
过渡：1s；
保证金：5px；
}
.卡正面，
.退卡{
宽度：100%；
身高：100%；
边界半径：8px；
位置：绝对位置；
背面可见性：隐藏；
变换：translateZ（0）；
}
.退卡{
背景颜色：橙色；
}
img{
宽度：170px；
高度：190px；
填充物：5px；
边界半径：8px；
}
.卡正面{
背景色：白色；
变换：旋转（180度）；
}
/*将被删除一次。卡。打开工作
.卡：活动{
变换：旋转（180度）；
}
*/
.card.flip{
变换：旋转（180度）；
}
.卡片容器{
显示器：flex；
柔性包装：包装；
}

.flip {
     transform: rotateY(180deg);
 }

var flip = function() {
  this.classList.toggle("flip")
};

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener('click', flip, false);
}