当我更改html中的body标记类时，Javascript事件不再工作了？

我正在建立一个网站公文包，顶部有一个交互式显示，上面有一些点击事件和悬停。然而，我改变了“body”类，这样我就可以将它与我的网站相适应，然后javascript停止工作，我一辈子都搞不懂它

（抱歉，如果我没有显示足够的代码片段…）我正在使用scss，但当我将其切换到VSC时，我使用了一个transpiler将其转换为css

像时间和日期这样的普通脚本工作得很好-它似乎只是页面上/现在“display”div中连接的元素，我无法再连接这些元素了

当类带有主体代码时，它可以正常工作：

html，正文{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
身体{
背景：#CCBBFF；
z指数：-10；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
mainDisp先生{
宽度：1000px；
高度：550px；
边框：1px纯黑；
//溢出：隐藏；
}
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
* {
位置：绝对位置；
}
*：之前，
*：之后{
内容：“；
位置：绝对位置；
}
.灯{
宽度：120px；
高度：80px；
背景#4949；
-webkit剪辑路径：多边形（50%0%、0.48%、100%48%）；
剪辑路径：多边形（50%0%，048%，100%48%）；
左：45%；
排名前10%；
z指数：4；
}

..

您的问题是将.display的

z索引设置为
-10
。它不再可以点击了

将其设置为
0
将解决您的问题：

.display {
     width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #CCBBFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 0;
}

看看这个分叉。
你的代码可以从数据属性中受益，这样你就不会一次又一次地复制和粘贴相同的代码。
javascript不再工作了。
请具体说明，什么不工作？另外，重新创建问题，而不是按原样复制/粘贴代码也很好。因此，请单击控制台中的错误
“消息”：“未捕获类型错误：无法读取null的属性'addEventListener'，
，它会将您带到第141行
lightSwitch.addEventListener”（
，并且您正在搜索的类不存在。这是假设您提供了所有代码…如果没有，请提供它…您的代码片段不足以重现您的问题..display.mainDisp not closed}太棒了！！！我知道我在做一些愚蠢的事情-非常感谢！！它工作完美：）