当我用Javascript添加一个新的CSS样式时，JS；它停止工作了

我有一个JavaScript待办事项列表，在我添加下面的代码之前它一直有效。与之相适应的风格。（整个代码保存在）。是的，我想使用纯JS

function toggleShimmer(e) {
    box.classList.add("shimmer");
}

我不明白为什么它最初停止工作，但我想知道这是否与我正在添加的CSS附加到包装器，JavaScript附加到包装器中的项目这一事实有关

我尝试了一些方法来解决这个问题。首先，我尝试在add.classList上放置一个计时器，以便以后可以删除该样式。但是，当我这样做时，当我单击复选框时，样式将再次显示。我试图做的另一件事是调整列表项的z索引

初学者如有任何建议，将不胜感激

const addItems=document.querySelector（'.addItems'）；
const itemsList=document.querySelector（'.plates'）；
const items=JSON.parse（localStorage.getItem（'items'））| |[]；
const box=document.querySelector（“#rectWrapper”）；
函数附加项（e）{
e、 预防默认值（）；
常量文本=（this.querySelector（'[name=item]'））.value；
常数项={
文本，
完成：错误
};
项目。推送（项目）；
大众列表（项目，项目列表）；
setItem（'items'，JSON.stringify（items））；
这是reset（）；
}
函数populateList（plates=[]，platesList）{
platesList.innerHTML=plates.map（（plate，i）=>{
返回`

${plate.text}

`;
}).加入（“”）；
}
功能切换完成（e）{
如果（！e.target.matches（'input'））返回；//跳过此操作，除非它是输入
常数el=e.目标；
const index=el.dataset.index；
项目[索引]。完成=！项目[索引]。完成；
setItem（'items'，JSON.stringify（items））；
大众列表（项目，项目列表）；
}
功能切换微光（e）{
框。类列表。添加（“微光”）；
}
窗口。addEventListener（“加载”，切换闪烁）；
框。添加了监听器（'mouseenter'，toggleShimmer）；
addItems.addEventListener（“提交”，addItem）；
itemsList.addEventListener（“单击”，切换完成）；
大众列表（项目，项目列表）
html{
/*背景色：#B01E84B01E84*/
背景：rgba（153,25,117,1）；
背景：-moz线性梯度（-45度，rgba（153，25，117，1）0%，rgba（212，19，157，1）100%）；
背景：-webkit渐变（左上、右下、颜色停止（0%，rgba（153、25、117、1））、颜色停止（100%，rgba（212、19、157、1））；
背景：-webkit线性梯度（-45度，rgba（153，25，117，1）0%，rgba（212，19，157，1）100%）；
背景：-o-线性梯度（-45度，rgba（153,25117,1）0%，rgba（212,19157,1）100%）；
背景：-ms线性梯度（-45度，rgba（153,25,117,1）0%，rgba（212,19,157,1）100%）；
背景：线性梯度（135度，rgba（153，25，117，1）0%，rgba（212，19，157，1）100%）；
框大小：边框框；
/*背景：url（'http://wes.io/hx9M/oh-la-la.jpg中心不重复*/
/*背景尺寸：封面*/
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
字体系列：Futura，“投石机MS”，Arial，无衬线；
}
*,
*：之前，
*：之后{
框大小：继承；
}
/*svg{
填充物：白色；
背景：rgba（0,0,0,0.1）；
填充：20px；
边界半径：50%；
宽度：200px；
边缘底部：50px；
} */
.包装纸{
填充：20px；
最大宽度：350px；
背景色：#7A0857；
盒影：0 10px rgba（0,0,0,0.1）；
}
.微光{
位置：相对位置；
溢出：隐藏；
/*宽度：50px*/
/*高度：50px*/
显示：内联块；
/*利润率：25px 0 25px 25px*/
/*边界半径：5px*/
颜色：#fff；
}
/*“发光”元素*/
.希默：之后{
内容：“；
位置：绝对位置；
前-110%；
左-210%；
宽度：200%；
身高：200%；
不透明度：0；
变换：旋转（30度）；
背景：rgba（255，255，255，0.13）；
背景：线性梯度（向右，rgba（255，255，255，0.13）0%，rgba（255，255，255，0.13）77%，rgba（255，255，255，0.5）92%，rgba（255，255，255，0.0）100%；
/*显示：无*/
显示：块；
/*显示：内联*/
}
/*悬停状态-触发效应*/
.闪烁：悬停：之后{
不透明度：1；
前-40%；
左-40%；
过渡属性：左、上、不透明度；
过渡时间：1.4s、1.4s、0.3s；
过渡时间功能：轻松；
}
/*活动状态*/
.闪烁：激活：之后{
不透明度：0；
}
氢{
文本对齐：居中；
保证金：0；
字号：200；
}
.盘子{
保证金：0；
填充：0；
文本对齐：左对齐；
列表样式：无；
}
李先生{
边框底部：1px实心rgba（0,0,0,0.2）；
填充：10px0；
字号：100；
显示器：flex；
}
.车牌标签{
弹性：1；
光标：指针；
}
.车牌输入{
显示：无；
}
.板材输入+标签：之前{
内容:'⬜️';
右边距：10px；
}
.板材输入：选中+标签：之前{
内容：“表单上方有一个伪元素（
shimmer:after
），阻止您单击输入字段或添加按钮

最简单的解决方案是使微光对鼠标事件“透明”：

.shimmer:after {
  pointer-events: none;
}

在
.shimmer:after
的规则中，将
宽度更改为
70%
，然后播放您的输入。您将看到shimmer对象（
：after
伪元素）覆盖了您的输入。您将无法单击元素所在的位置，但会在其他位置单击。如何停止添加JavaScript的样式当其他人点击时“闪烁”。基本上，样式会短暂闪烁。