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

Question

Click the odd color first time it will be black so from nxt tap its giving the same rgb value but the alert is returning false on comparison

所以基本上我想提醒 return 对于具有相同 rgb 的奇数颜色是真的..但它是 returning 假的

这里因为颜色相同而且我点击了奇数按钮它应该 return 正确但它显示错误为什么这样？

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 在每个逗号后有一个白色 space

rgb(156, 233, 40)

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

只需更换

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

由

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

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

Why is alert returning false even when rgb values are equal(considering odd values only)

javascript

rgb

alert

match