为什么即使 rgb 值相等，警报也会返回 false（仅考虑奇数值）

Question

第一次点击奇怪的颜色，它会变成黑色，所以从 nxt 点击它会给出相同的 rgb 值，但警报在比较时返回 false

所以基本上我希望 alert 对于具有相同 rgb 的奇数颜色返回 true ..但它返回 false

这里因为颜色相同，我点击了奇数按钮，它应该返回 true，但它显示 false 为什么会这样？

window.onload = function(){
    
    
var color,num,oddcircle,random_color,r,g,b,odd_color; 
var score = 0;
var circle1 = document.getElementById("component1");

var circle2 = document.getElementById("component2");

var circle3 = document.getElementById("component3");

var circle4 = document.getElementById("component4");

var circle5 = document.getElementById("component5");

var circle6 = document.getElementById("component6");

var circle7 = document.getElementById("component7");

var circle8 = document.getElementById("component8");

var circle9 = document.getElementById("component9");

// adding eventlisteners :)

document.getElementById("component1").addEventListener("click",color1);

document.getElementById("component2").addEventListener("click",color2);

document.getElementById("component3").addEventListener("click",color3);

document.getElementById("component4").addEventListener("click",color4);

document.getElementById("component5").addEventListener("click",color5);

document.getElementById("component6").addEventListener("click",color6);

document.getElementById("component7").addEventListener("click",color7);

document.getElementById("component8").addEventListener("click",color8);

document.getElementById("component9").addEventListener("click",color9);

var ar = [circle1,circle2,circle3,circle4,circle5,circle6,circle7,circle8,circle9]

function update(){
   num = Math.floor(Math.random()*9)
   r = Math.floor(Math.random()*240);
   g = Math.floor(Math.random()*240);
   b = Math.floor(Math.random()*240);
   random_color = "rgb"+"("+r+","+g+","+b+")";
   odd_color = "rgb"+"("+(r+15)+","+(g+15)+","+(b+15)+")";
   oddcircle=ar[num];
   score+=10;
   document.getElementById("score").innerHTML = "Score : "+score;
   oddcircle.style.backgroundColor=odd_color;
   for(i=0;i<=8;i++){
       if(i==num){
           
       }
       else{
          ar[i].style.backgroundColor = random_color; 
       }
   }
}
function color1(){
alert(window.getComputedStyle(circle1).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle1).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color2(){
alert(window.getComputedStyle(circle2).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle2).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color3(){
alert(window.getComputedStyle(circle3).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle3).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color4(){
alert(window.getComputedStyle(circle4).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle4).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color5(){
alert(window.getComputedStyle(circle5).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle5).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color6(){
alert(window.getComputedStyle(circle6).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle6).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color7(){
alert(window.getComputedStyle(circle7).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle7).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color8(){
alert(window.getComputedStyle(circle8).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle8).getPropertyValue("background-color")+" "+odd_color))
update();
}
function color9(){
alert(window.getComputedStyle(circle9).getPropertyValue("background-color") == odd_color+" "+alert(window.getComputedStyle(circle9).getPropertyValue("background-color")+" "+odd_color))
update();
}
}

body {
    margin:0;
    padding:0;
    background-color:#dadada;
}
#score{
    font-size:25px;
    font-weight:bold;
    width:100%;
    text-align:center;
    padding-bottom:40px;
}
.circle{
    height:calc(100vh/5);
    width:calc(100vh/5);
    background-color:#000;
    border-radius:100%;
    display:inline-block;
}
.game_con{
    height:100vh;
    width:100vw;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <div class="game_con">
    <div id="score">Score : 0</div>
    <div class="comp">
        <div class="circle" id="component1"></div>
        <div class="circle" id="component2"></div>
        <div class="circle" id="component3"></div>
        <div></div>
        <div class="circle" id="component4"></div>
        <div class="circle" id="component5"></div>
        <div class="circle" id="component6"></div>
        <div></div>
        <div class="circle" id="component7"></div>
        <div class="circle" id="component8"></div>
        <div class="circle" id="component9"></div>
        </div>
        </div>
    </body>
</html>

非常感谢任何帮助！

Answer 1

单击任何圆圈时返回的 rgb 在每个逗号后都有一个空格

rgb(156, 233, 40)

但是您正在创建的odd_color 没有那个空白，请在您正在创建的变量中添加空白

只需替换

odd_color = "rgb"+"("+(r+15)+","+(g+15)+","+(b+15)+")";

由

odd_color = "rgb"+"("+(r+15)+", "+(g+15)+", "+(b+15)+")";