flip card类未在javascript中转换

此代码正在抛出未捕获的TypeError。 我试图通过点击翻转卡片来翻转它。 但代码给出了以下错误： “未捕获的TypeError:无法设置未定义的属性“transform” 有什么问题？ 在这里，我将尝试旋转的div命名为“翻转卡” 我还对css属性中的hover属性进行了注释

代码：

功能旋转卡（）{
console.log（“此处”）；
var j=document.getElementsByClassName（“翻转卡”）；
控制台日志（j）；
var k=0；
k+=180；
j、 style.transform=“rotateY（“+k+”度）”；
//flip.style.transform=“旋转（180度）”；
}

.flip卡{
背景色：透明；
宽度：300px；
高度：300px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
/*.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}*/
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
.把卡片翻回去{
背景色：#2980b9；
颜色：白色；
变换：旋转（180度）；
}

唠叨
含糊不清地说
说得太多，浪费时间

观众真的很无聊，所以他们喋喋不休

文档。GetElementsByCassName（“flip card”）

将返回一个DOM数组元素，只需添加

[0]

以选择数组的第一个元素，如下所示：

功能旋转卡（）{
var j=document.getElementsByClassName（“翻转卡”）[0]；
var k=0；
if（j.style.transform）{
k=+j.style.transform.substring（7，j.style.transform.indexOf（'deg'）；
}
控制台日志（k）；
k+=180；
j、 style.transform=“旋转（“+k+”度）”；
//flip.style.transform=“旋转（180度）”；
}

.flip卡{
背景色：透明；
宽度：300px；
高度：300px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
/*.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}*/
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
.把卡片翻回去{
背景色：#2980b9；
颜色：白色；
变换：旋转（180度）；
}

唠叨
含糊不清地说
说得太多，浪费时间

观众真的很无聊，所以他们喋喋不休

它正在工作。但现在，如果我再次点击它，它就不会再旋转了。你知道我该如何实现这个功能吗？@MahmudMushfique，我更新了我的代码片段，检查了它，然后voteup接受：）谢谢你！我接受了答案。但是，我不能投票，因为我没有15分：(