Javascript 在单击“下一步”之前，检查是否单击并选择了元素

我有一个按钮菜单，用户可以在点击“完成”按钮之前点击一个或多个按钮。但是，用户当前可以单击“完成”，而无需事先实际单击任何其他按钮，因此可以提交而无需实际提交答案（即，控制台打印一个空数组）

我希望防止用户在未提交任何答案的情况下单击“完成”按钮，即数组应始终包含A、B、C或d，或其中的多个字母。相反，如果用户没有先单击另一个按钮就单击“完成”，我希望他们看到一条错误消息

由于我使用映射函数生成按钮（上下文：菜单根据myList显示所需的按钮数量），所以实现此功能时遇到了问题。有人有什么建议吗？非常感谢

.按钮{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
#钮扣{
利润率：10px；
填充：10px；
边框：纯色2px黑色；
宽度：155px；
}
#完成{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
完成

设$ButtongGallery=$（“#ButtongGallery”）；
让myList=[“A”、“B”、“C”、“D”]；
让myColors=[“红色”、“绿色”、“蓝色”、“红色”]；
让点击=[]；
myList.map（函数（字母、索引）{
让$button=$（“”）
.addClass（“按钮”）
.attr（“id”、“按钮”+字母）
.html（“”+字母+”
”）
.on（“mouseenter”，function（）{
$（this.css（“背景”，myColors[index]）；
})
.on（“mouseleave”，函数（）{
if（！$（this）.hasClass（'selected'））{
$（this.css（“背景”、“透明”）；
}
})
.on（“单击”，函数（）{
$（this.css（“背景”，myColors[index]）；
$（this.toggleClass（'selected'）；
点击=[]；
//将单击的变量推送到数组
让syms=document.querySelectorAll（'.selected'）；
对于（设n=0；n

您可以检查单击的长度是否大于零

函数clearColor（）{
如果（clicked.length==0）{
警惕（）；
返回false；
}
log（'clicked array'，clicked）；
...

如果用户没有选择所有值，您可以简单地使用函数和用于显示错误

如果未选择A、B、C或D，请运行下面的代码段以查看弹出的错误

让$buttonGallery=$（“#buttonGallery”）；
让myList=[“A”、“B”、“C”、“D”]；
让myColors=[“红色”、“绿色”、“蓝色”、“红色”]；
让点击=[]；
myList.map（函数（字母、索引）{
让$button=$（“”）
.addClass（“按钮”）
.attr（“id”、“按钮”+字母）
.html（“”+字母+”
”）
.on（“mouseenter”，function（）{
$（this.css（“背景”，myColors[index]）；
})
.on（“mouseleave”，函数（）{
if（！$（this）.hasClass（'selected'））{
$（this.css（“背景”、“透明”）；
}
})
.on（“单击”，函数（）{
$（this.css（“背景”，myColors[index]）；
$（this.toggleClass（'selected'）；
点击=[]；
//将单击的变量推送到数组
让syms=document.querySelectorAll（'.selected'）；
对于（设n=0；n

。按钮{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}
#钮扣{
利润率：10px；
填充：10px；
边框：纯色2px黑色；
宽度：155px；
}
#完成{
宽度：150px；
高度：50px；
边框：纯色2px黑色；
文本对齐：居中；
颜色：黑色；
光标：指针；
背景色：白色；
保证金：2倍；
}

完成

@psychcoder是的！这是因为您的错误消息div位于

按钮列表中。要显示错误消息并进行您自己的样式设置，您可以将错误div放在
的正上方。此外，如果我帮了您，您介意接受我的回答并向上投票吗。谢谢。哇，意外删除了我的评论-最初的评论是“如何在css中重新定位错误消息？”