如何在html/javascript多维数据集代码的侧面设置onclick事件侦听器

我正在尝试编写一个html/javascript和css多维数据集，到目前为止，我在网上找到的示例只需按下一个单选按钮即可旋转或移动，但我想在所有侧面设置一个onclick事件侦听器，这样当单击某一侧时，它就会移动

我尝试过使用这个“document.getElementById（“多维数据集”）.addEventListener（“单击”，changeSide）；”但什么也没发生

var cube=document.querySelector（'.cube'）；
var radioGroup=document.querySelector（'.radio group'）；
var currentClass=''；
函数changeSide（）{
var checkedRadio=radioGroup.querySelector（“：checked”）；
var showClass='show-'+checkedRadio.value；
如果（当前类）{
cube.classList.remove（currentClass）；
}
cube.classList.add（showClass）；
currentClass=showClass；
}
//设置初始边
changeSide（）；
radioGroup.addEventListener（'change'，changeSide）；
document.getElementById（“多维数据集”）.addEventListener（“单击”，变更侧）
*{框大小：边框框；}
正文{字体系列：无衬线；}
.现场{
宽度：200px；
高度：200px；
边框：1px实心#CCC；
利润率：80px；
透视图：400px；
}
.立方体{
宽度：200px；
高度：200px；
位置：相对位置；
变换样式：保留-3d；
变换：translateZ（-100px）；
转变：转变1s；
}
.cube.show-front{transform:translateZ（-100px）rotateY（0度）；}
.cube.show-right{transform:translateZ（-100px）rotateY（-90度）；}
.cube.show-back{transform:translateZ（-100px）rotateY（-180度）；}
.cube.show-left{变换：translateZ（-100px）rotateY（90度）；}
.cube.show-top{transform:translateZ（-100px）rotateX（-90度）；}
.cube.show-bottom{transform:translateZ（-100px）rotateX（90度）；}
.cube___面{
位置：绝对位置；
宽度：200px；
高度：200px；
边框：2件纯黑；
线高：200px；
字体大小：40px；
字体大小：粗体；
颜色：白色；
文本对齐：居中；
}
.cube__面--前面{背景：hsla（0,100%，50%，0.7）}
.cube__面——右{背景：hsla（60,100%，50%，0.7）}
.cube__面--背面{背景：hsla（120100%，50%，0.7）}
.cube__面--左{背景：hsla（180100%，50%，0.7）}
.cube__面--顶部{背景：hsla（240100%，50%，0.7）}
.cube_u面--底部{背景：hsla（300,100%，50%，0.7）}
.cube__面--前{变换：旋转（0deg）translateZ（100px）；}
.cube__面--右{变换：旋转（90度）平移（100px）；}
.cube__面--back{变换：旋转（180度）translateZ（100px）；}
.cube__面--左{变换：旋转（-90度）translateZ（100px）；}
.cube__面--top{变换：rotateX（90度）translateZ（100像素）；}
.cube__面--底部{变换：rotateX（-90度）translateZ（100px）；}
标签{右边距：10px；}

46
97
23
54
32
11

前面
正确的
返回
左边
顶部
底部
当您单击它时，函数会检查单选按钮的状态，并看到所选的一面已经显示出来。我想您应该使用document.querySelector（“#cube”）而不是document.querySelector（“.cube”）。有两个div，一个是cude类，另一个是cude id。比如说，活动类是“show front”。当您单击该框时，它只是尝试再次将活动类设置为“show front”，由于它已经处于该位置，因此它不会添加
console.log（'inChangeSide'）到changeSide函数，您将看到我们的onClick处理程序正在触发。当您单击它时，该函数将检查单选按钮状态，并看到所选端已显示。我认为您希望执行document.querySelector（“#cube”）而不是document.querySelector（“.cube”）。有两个div，一个是cude类，另一个是cude id。比如说，活动类是“show front”。当您单击该框时，它只是尝试再次将活动类设置为“show front”，由于它已经处于该位置，因此它不会添加
console.log（'inChangeSide'）到changeSide函数，您将看到我们的onClick处理程序正在触发。