Javascript 隐藏区块卡的按钮不起作用

有一些卡片，当你点击复选标记时，卡片会横飞，当你点击十字架时，卡片会翻转到正确的答案。在这一边有一个按钮，当你点击卡片飞到一边时，以及当你点击复选标记时。我对最后一点有意见。如何使得当你点击卡片背面的下一个类的按钮时，活动卡片会横飞

“严格使用”；
var quizcardContainer=document.querySelector（'.quizcard'）；
var allCards=document.queryselectoral（'.flip card'）；
var nope=document.getElementById（'nope'）；
var love=document.getElementById（'love'）；
var next=document.getElementById（'next'）；
功能初始化卡（卡，索引）{
var newCards=document.queryselectoral（'.flip-card:not（.removed'）；
newCards.forEach（函数（卡片、索引）{
card.style.zIndex=allCards.length-索引；
card.style.opacity=（10-索引）/10；
});
quizcardContainer.classList.add（'loaded'）；
}
initCards（）；
函数createButtonListener（爱）{
返回函数（事件）{
var cards=document.queryselectoral（'.flip card:not（.removed'）；
var moveOutWidth=document.body.clientWidth*0.3；
如果（！cards.length）返回false；
var卡=卡[0]；
card.classList.add（'removed'）；
如果（爱）{
card.style.transform='translate（'+moveOutWidth+'px，-900px）旋转（0度）'；
}否则，如果（否）{
card.classList.toggle（'do-flip'）；
document.querySelectorAll（'next'）。onclick=function（）{
card.style.transform='translate（'+moveOutWidth+'px，900px'）；
};
} 
initCards（）；
event.preventDefault（）；
};
}
var nopeListener=createButtonListener（false）；
var loveListener=createButtonListener（true）；
否。添加事件列表器（'click'，nopeListener）；
love.addEventListener（'click'，loveListener）；

.quizcard{
宽度：100vw；
高度：100vh；
溢出：隐藏；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
位置：相对位置；
不透明度：0；
-webkit转换：不透明度0.1s易入易出；
过渡：不透明度0.1s缓进缓出；
}
.已加载的.quizcard{
不透明度：1；
}
quizcard先生——地位{
位置：绝对位置；
最高：50%；
利润上限：-30px；
z指数：2；
宽度：100%；
文本对齐：居中；
指针事件：无；
}
quizcard先生——第一状态{
字体大小：100px；
不透明度：0；
-webkit变换：比例（0.3）；
变换：比例（0.3）；
-webkit转换：所有0.2秒易入易出；
过渡：所有0.2秒缓进缓出；
位置：绝对位置；
宽度：100px；
左边距：-50px；
}
.quizcard_love.fa支票{
不透明度：0.7；
-webkit转换：规模（1）；
变换：比例（1）；
}
.quizcard_no.fa移除{
不透明度：0.7；
-webkit转换：规模（1）；
变换：比例（1）；
}
奎斯卡先生--卡片{
-webkit-box-flex:1；
柔性生长：1；
填充顶部：40px；
文本对齐：居中；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：结束；
对齐项目：柔性端；
z指数：1；
}
.quizcard--按钮{
-webkit-box-flex:0；
flex:0100px；
文本对齐：居中；
填充顶部：20px；
}
.quizcard--按钮{
边界半径：50%；
线高：60px；
宽度：60px；
边界：0；
背景：#FFFFFF；
显示：内联块；
边际：0.8px；
背景：#000；
}
.quizcard--按钮按钮：焦点{
大纲：0；
}
.quizcard--按钮一{
字体大小：32px；
垂直对齐：中间对齐；
}
.fa支票{
颜色：#089404；
}
.fa删除{
颜色：红色；
}
.翻盖卡片{
显示：内联块；
宽度：90vw；
最大宽度：400px；
高度：70vh；
文本对齐：居中；
保证金：50px自动；
位置：绝对位置；
-o型转换：所有1均易于输入输出；
-webkit转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
过渡：所有1都易于输入输出；
-o变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}
.做翻转动作{
-o变换：旋转（-180度）；
-webkit变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
}
.翻转卡片。翻转卡片正面。翻转卡片背面{
宽度：100%；
身高：100%；
位置：绝对位置；
-o-背面-可见性：隐藏；
-webkit背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
z指数：2；
-网络工具包盒阴影：5px 6px 32px 2px rgba（133133,0.71）；
-moz盒阴影：5px 6px 32px 2px rgba（133133,0.71）；
盒影：5px 6px 32px 2px rgba（133133,0.71）；
}
.翻转卡片。翻转卡片正面{
背景：浅绿色；
边框：1px纯灰；
}
.翻卡片.翻卡片{
背景：浅蓝色；
边框：1px纯灰；
-o变换：旋转（180度）；
-webkit变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
身高：100%；
}

前线1

后退1
翻转
前线2

后退2
翻转
前线3

后退3
翻转
前线4

后退4
翻转
前线5

后退5
翻转

在JS中向类添加事件时，应该使用

GetElementsByCassName

而不是

getElementById

试试这个代码

---

document.getElementsByClassName（'next'）.onclick=function（）{document.getElementById（'flip-card'）.classList.toggle（'do-flip'）；}

在JS中向类添加事件时，应该使用

getElementsByClassName

而不是

getElementById

试试这个代码

---

document.getElementsByClassName（'next'）.onclick=function（）{document.getElementById（'flip-card'）.classList.toggle（'do-flip'）；}
没有
getElementByClassName
这样的东西，它是
getElem