背景颜色不随Javascript更改？

我正在尝试使用forEach循环在框的网格中循环，并在单击时更改框的颜色。然而，由于某些原因，除了背景色之外，其他css样式都可以工作

• 我试着重做我的代码以及使用for循环，但它也不起作用

这是我的代码笔和我的代码：

var sqrs=document.querySelectorAll（'.sqr'）；
功能更改（事件）{
console.log（event.target）；
event.target.classList.toggle（'my_choice'）；
}
sqrs.forEach（sqr=>sqr.addEventListener（'click'，changeCol））
。我的选择{
边框：3倍纯黑；
颜色：白色；
背景颜色：绿色；
}

0
1.
2.
3.
4.
5.
6.
7.
8.
您需要设置class属性

var sqrs = document.querySelectorAll('.sqr');

function changeCol(event) {
 console.log(event.target);
  event.target.setAttribute('class','my_choice');
}

sqrs.forEach(sqr => {
  sqr.addEventListener('click',changeCol);
});

简单解决方案：-

var sqrs = document.querySelectorAll('.sqr');
sqrs.forEach(sqr => {

  sqr.addEventListener('click', function(){sqr.classList.toggle('my_choice'); });
});

注意：-在链接
中。我选择的
样式为空，因此添加
背景：绿色
&同时删除
。一个
您的css代码在代码笔上有问题：


.one
.我的选择{
}
在这里似乎工作正常。无论问题是什么，问题中没有足够的信息来重现它。请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个，并将其放在问题本身中。在CSS中将
.my_choice
移到
.sqr
之后。这些方块最初的背景颜色为橙色。我正在努力使它变成绿色。但是只有另外两个css样式生效。@神秘阴影-它们没有橙色背景（在问题本身中提供一个颜色）。不，它们没有<代码>类列表
可以。您可以在问题中的实时演示中看到它的工作情况。它得到了很好的支持。