Javascript 知道每个元素何时具有相同的CSS属性值

我正在制作一个表格，使用一些圆圈向用户显示字段是否正确填写

我想知道什么时候所有的圆圈都是绿色的，然后改变提交按钮的背景色

如果您不明白，只需全屏运行代码片段，您就会看到

//切换框系统
var-toggleCanvas=document.getElementById（'newsteller'）；
设n_state=true；
函数toggleNewsteller（）{
if（getComputedStyle（document.getElementById（'newsteller'））.backgroundColor==“rgb（180223180）”）{
n_state=false；
}否则{
n_state=true；
}
如果（n_state==false）{
document.getElementById（'newsteller'）.style.backgroundColor=“hsl（120,3%，93%）”；
}else if（n_state==true）{
document.getElementById（'newsteller'）.style.backgroundColor=“rgb（180223180）”；
}
}
功能模糊检查（id）{
var element_base=document.getElementById（id）；
var circleSibling=getCircle（元素_基）；
if（getComputedStyle（circleSibling）.backgroundColor==“rgb（237238237）”）{
circleSibling.style.backgroundColor='rgb（180223180）'；
}
if（element_base.value==“”）{
circleSibling.style.backgroundColor='rgb（255，127，123）'；
}
}
功能字符检查（示例）{
var arr=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“0”、“@”、“0”、“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“8”、“9”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0”、“0
对于（变量i=arr.length-1；i>=0；--i）{
if（sample.indexOf（arr[i]）！=-1）{
返回true；
}
}
}
函数passwordBlur（）{
var元素=document.getElementById（'mdpbis'）；
var circleSibling=getCircle（元素）；
if（getComputedStyle（circleSibling）.backgroundColor==“rgb（237238237）”）{
circleSibling.style.backgroundColor='rgb（255，127，123）'；
}
}
函数email_check（）{
var circleSibling=getCircle（document.getElementById（'email'）；
var emailString=document.getElementById（'email'）。值；
var arr=[“@”]
对于（变量i=arr.length-1；i>=0；--i）{
if（emailString.indexOf（arr[i]）！=-1）{
var arr=[“]”
对于（变量i=arr.length-1；i>=0；--i）{
if（emailString.indexOf（arr[i]）！=-1）{
circleSibling.style.backgroundColor='rgb（180223180）'；
}否则{
circleSibling.style.backgroundColor='rgb（255，127，123）'；
}
}
}否则{
circleSibling.style.backgroundColor='rgb（255，127，123）'；
}
}
}
函数getCircle（元素）{
while（elements=elements.nextSibling）{
if（elements.className==='circle'）{
返回元素；
}
}
返回错误
}
函数prenom_确认（）{
var prenom=document.getElementById（'prenom'）；
var circleStyle=getCircle（prenom）.style；
if（字符检查（prenom.value）==true）{
circleStyle.backgroundColor='rgb（255、127、123）'；
}否则{
circleStyle.backgroundColor=“rgb（237238237）”；
}
}
函数名确认（）{
var nom=document.getElementById（'nom'）；
var circleStyle=getCircle（nom）.style；
如果（字符检查（标称值）=真）{
circleStyle.backgroundColor='rgb（255、127、123）'；
}否则{
circleStyle.backgroundColor=“rgb（237238237）”；
}
}
函数用户名\u确认（）{
var username=document.getElementById（'username'）；
var circleStyle=getCircle（用户名）.style；
如果（字符检查（username.value）==true）{
circleStyle.backgroundColor='rgb（255、127、123）'；
}否则{
circleStyle.backgroundColor=“rgb（237238237）”；
}
}
功能电子邮件_确认（）{
var email=document.getElementById（'email'）；
var circleStyle=getCircle（email）.style；
如果（字符检查（email.value）==true）{
circleStyle.backgroundColor=“rgb（237238237）”；
}否则{
circleStyle.backgroundColor='rgb（255、127、123）'；
}
}
功能mdp_确认（）{
mdp_检查（）
var mdp=document.getElementById（'mdp'）；
var circleStyle=getCircle（mdp）.style；
if（字符检查（mdp.value）=true&&mdp.value.length>=6）{
circleStyle.backgroundColor='rgb（180223180）'；
}否则{
circleStyle.backgroundColor='#FFE68D'；
}
}
函数mdp_check（）{
var mdp=document.getElementById（'mdp'）；
var circleMdp=getCircle（mdp）；
var mdpbis=document.getElementById（'mdpbis'）；
var circlemdbis=getCircle（mdpbis）；
if（mdpbis.value==mdp.value）{
circlemdbis.style.backgroundColor=getComputedStyle（circleMdp）.backgroundColor；
}else if（mdpbis.value！==mdp.value）{
circlemdbis.style.backgroundColor=“rgb（2372387）”；
}
}

*{
边际：0px；
填充：0px；
字体系列：“Futura”，无衬线；
-webkit字体平滑：剖析；
}
：：选择{
背景：小麦；
}
a{
文字装饰：无；
}
身体{
背景：#DEDEDE；
}
投入：聚焦，
选择：焦点{
大纲：无；
}
.登录表单窗口{
边缘顶部：50px；
宽度：90%；
左缘：5%；
背景：白色；
显示：块；
盒影：1px10px40pxRGBA（0,0,0,0.10）；
}
.窗口标题{
背景：小麦；
颜色：hsl（120,3,30%）；
字号：28px；
填充：10px；
字号：100；
字号：100；
}
.窗口信息{
填充：10px；
颜色：hsl（120,3,60%）；
}
.说明{
字号：19px；
颜色：hsl（120,2,20%）；
填充：10px；
}
.输入des{
颜色：hsl（120,3,35%）；
利润率：10px；
}
.对{
右边距：30px；
}
.表格{
显示：内联块；
右边距：15px；
填充：3px0px；
宽度：300px；
最小高度：1px；
文本对齐：右对齐；
}
.文本输入{
边界：无；
背景：hsl（120,3,93%）；
宽度：150px；
高度：30px；
边界半径：5px；
左侧填充：-2px；
字体大小：15px；
文本对齐：居中；
文字装饰：无；
}
.圆圈{
左边距：20px；
高度：30px；
宽度：30px；
边界半径：15px；
背景色：hsl（120,3,93%）；
垂直对齐：底部对齐；
}
.选择国家{
高度：30px；
边界：无；
var x = document.querySelectorAll('.circle'); // get all circle elements
var y="";
x.forEach(circ => { //loop through each circle to check bg-color
    if (circ.style.backgroundColor !== 'rgb(180, 223, 180)') {
        y += '0';
    } else {
        y += '1';
    }
});

if ( y.indexOf("0") > -1 )  { // are there red circles?
    console.log('dont do anything'); //yes there are
} else {
    console.log('run submit button css change function'); // no there aren't. go ahead and run a function to change submit css here
}

if (emailString.indexOf(arr[i]) != -1) {
    circleSibling.classList.add('green');
    circleSibling.classList.remove('red');
} else {
    circleSibling.classList.add('red');
    circleSibling.classList.remove('green');
}

var x = document.querySelectorAll('.circle'); // get all circle elements
x.forEach(circ => { //loop through each circle to check bg-color
    if (circ.classList.contains('green')) {
        y += '1';
    } else {
        y += '0';
    }
});

if ( y.indexOf("0") > -1 )  { // are there red circles?
    console.log('dont do anything'); //yes there are
} else {
    console.log('run submit button css change function'); // no there aren't. go ahead and run a function to change submit css here
}