Javascript 检查“我的代码”中按钮网格的背景色

我想做的是，当所有按钮都变成黑色时，它会在“lightsoff”div中显示h2文本。因此，如果任何按钮不是黑色的，文本将被隐藏

我希望能够通过编写一个新函数来执行背景颜色的检查

功能切换（i，j）{
b=document.getElementById（“但是”+i+j）
t=b.html
如果（t=“X”）{
b、 innerHTML=“O”；
b、 setAttribute（“样式”，“颜色：红色；背景颜色：黄色”）
}
如果（t==“O”）{
b、 innerHTML=“X”；
b、 setAttribute（“样式”，“颜色：白色；背景色：黑色”）
}
}
功能压力机（i，j）{
切换（i，j）；
如果（i>0）{
切换（i-1，j）；
}
if（i<4）{
切换（i+1，j）；
}
如果（j>0）{
切换（i，j-1）；
}
if（j<4）{
切换（i，j+1）；
}
}
函数generateGrid（）{
var d=document.getElementById（“按钮网格”）；
var table=document.createElement（“表”）；
d、 儿童（表）；
对于（变量i=0；i<5；i++）{
var行=document.createElement（“tr”）；
对于（var j=0；j<5；j++）{
var cell=document.createElement（“td”）；
cell.innerHTML=“O”；
子行（单元格）；
}
表2.追加子项（行）；
}
切换（2，2）
}
window.onload=函数（）{
generateGrid（）；
};

熄灯拼图
点击按钮，直到它们全部变黑！
所有的灯都灭了，你赢了！
使用类和计数


功能切换（i，j）{
b=document.getElementById（“但是”+i+j）
t=b.html
如果（t=“X”）{
b、 innerHTML=“O”；
b、 className=“on”
}
如果（t==“O”）{
b、 innerHTML=“X”；
b、 className=“关”
}
var off=document.queryselectoral（“.off”）。length==document.queryselectoral（“#按钮网格表tr td”）。length；//全部关闭
document.getElementById（“lightsoff”）.style.display=off？“block”：“none”；//表示if（某物）x=a；else x=b的三元缩写；
}
功能压力机（i，j）{
切换（i，j）；
如果（i>0）{
切换（i-1，j）；
}
if（i<4）{
切换（i+1，j）；
}
如果（j>0）{
切换（i，j-1）；
}
if（j<4）{
切换（i，j+1）；
}
}
函数generateGrid（）{
var d=document.getElementById（“按钮网格”）；
var table=document.createElement（“表”）；
d、 儿童（表）；
对于（变量i=0；i<5；i++）{
var行=document.createElement（“tr”）；
对于（var j=0；j<5；j++）{
var cell=document.createElement（“td”）；
cell.innerHTML=“O”；
子行（单元格）；
}
表2.追加子项（行）；
}
切换（2，2）
}
window.onload=函数（）{
generateGrid（）；
};
。在{颜色：红色；背景色：黄色}
.off{颜色：白色；背景色：黑色}
#lightsoff{display:none}

熄灯拼图
点击按钮，直到它们全部变黑！
所有的灯都灭了，你赢了！
使用状态的
类列表切换类，然后使用
querySelectorAll（）
查看该类的元素数


功能切换（i，j）{
b=document.getElementById（“但是”+i+j）
b、 classList.toggle（“打开”）
b、 textContent=b.classList.contains（“on”）？“O”：“X”
}
功能压力机（i，j）{
切换（i，j）；
如果（i>0）{
切换（i-1，j）；
}
if（i<4）{
切换（i+1，j）；
}
如果（j>0）{
切换（i，j-1）；
}
if（j<4）{
切换（i，j+1）；
}
console.log（“on按钮的数量为：”，document.queryselectoral（“button.on”）.length）
}
函数generateGrid（）{
var d=document.getElementById（“按钮网格”）；
var table=document.createElement（“表”）；
d、 儿童（表）；
对于（变量i=0；i<5；i++）{
var行=document.createElement（“tr”）；
对于（var j=0；j<5；j++）{
var cell=document.createElement（“td”）；
cell.innerHTML=“O”；
子行（单元格）；
}
表2.追加子项（行）；
}
切换（2，2）
}
window.onload=函数（）{
generateGrid（）；
};
td按钮{
颜色：#FFF；
背景色：#000；
}
td button.on{
颜色：红色；
背景色：#FFC；
}

熄灯拼图
点击按钮，直到它们全部变黑！
所有的灯都灭了，你赢了！
类更容易使用。查询一个类并查看它是否与大小匹配非常简单。那么，你建议我做什么更改？打开、活动、关闭一个类，等等，而不是直接查看颜色。对不起，我对javascript非常陌生，你能告诉我怎么做吗？我希望能够做到这一点，而不改变任何javascript代码，或者至少改变很少，并且通过创建一个新函数来处理背景颜色的检查，然后显示文本。因此，我简化了您的代码，并给出了一行代码-为什么这是一个问题？您的第二位代码，function check（）这正是我要找的，你能解释一下返回false和返回true的作用吗？如果有O，则表示false，如果没有Osorry，则表示true如果这听起来很愚蠢，我对javascript不熟悉，但它在哪里表示？如果是“0”，则表示返回false。。。。如果没有，它将检查下一个元素并继续，直到没有其他要检查的元素。。。在这种情况下，它是“真的”，因为没有什么是“O”。仍然是100%更好的类…是的，我理解这一点，但我如何知道输出是真是假？它在哪里告诉我的？