如果陈述总是错误的，为什么？答案

【问题标题】：If statement is always false, WHY?如果陈述总是错误的，为什么？
【发布时间】：2016-05-07 09:43:04
【问题描述】：

别管 HTML 和 CSS，我已经编写了我的 JS，并尽可能地注释了所有内容以使其易于理解。基本上，这是一个猜色游戏，由于某种原因，我无法正常工作，任何人都可以找出错误吗？

//Array of RGB colors for debuuging purpose
var colors = [
"RGB(255, 0, 0)",
"RGB(255, 255, 0)",
"RGB(255, 0, 255)",
"RGB(0, 255, 255)",
"RGB(0, 255, 0)",
"RGB(0, 0, 255)" ]

//Get all square class divs and put inside "squares"
var squares = document.querySelectorAll(".square");

//pick a set color as the right color for debugging purpose
var pickedColor = colors[3];

//Mach HTML <span> tag 
//******************************************************
var colorDisplay = document.getElementById("colorDisplay");

colorDisplay.textContent = pickedColor;
//******************************************************

//loop through all the squares and assign
//    a set color from "colors" array
for(var i = 0; i < squares.length; i++) {
//Add initial colors to squares
squares[i].style.background = colors[i];

//Add click listeners to squares
squares[i].addEventListener("click", function(){
    //grab color of clicked square
    var clickedColor = this.style.background;

    //compare color to pickedColor
    if(clickedColor === pickedColor){
        this.style.background = white;
    } else {
        this.style.background = "#232323";
        //Bug: For some reason, if statment is never
        //true. I can't find the problem please help.
    }
})
}

【问题讨论】：

console.log([clickedColor,pickColor])，浏览器可以解析并将其转换为另一种格式，可以去除空格，也可以是不同的对象。
检查this.style.backgroundColor

标签： javascript debugging if-statement logic

【解决方案1】：

当您分配squares[i].style.background = colors[i]; 时，您正在将"RGB(255, 0, 0)" 之类的字符串分配给样式，并且浏览器正在将字符串规范化为"rgb(255, 0, 0)" 之类的字符串。如果您只使用 rgb 而不是 RGB 它会起作用。

另一个问题是你没有定义white。

这是修复了错误的代码。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <style>
                .square {
                    width: 150px;
                    height: 150px;
                    float: left;
                }
            </style>
        </head>
        <body>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <span id="colorDisplay"></span>
            <script>
                var white = "RGB(255, 255, 255)"; // Adding white var.

                var colors = [
                    "RGB(255, 0, 0)",
                    "RGB(255, 255, 0)",
                    "RGB(255, 0, 255)",
                    "RGB(0, 255, 255)",
                    "RGB(0, 255, 0)",
                    "RGB(0, 0, 255)"
                ];

                var squares = document.querySelectorAll(".square");
                var pickedColor = colors[3];
                var colorDisplay = document.getElementById("colorDisplay");

                colorDisplay.textContent = pickedColor;

                for(var i = 0; i < squares.length; i++) {
                    squares[i].style.background = colors[i];

                    squares[i].addEventListener("click", function(){
                        var clickedColor = this.style.background;

                        // Using lower case
                        if(clickedColor === pickedColor.toLowerCase()){
                            this.style.background = white;
                        } else {
                            this.style.background = "#232323";
                        }
                    });
                }
            </script>
        </body>
    </html>

【讨论】：

【解决方案2】：

我明白了！！！！

由于某种原因，我应该写 rgb 而不是 RGB，这导致了另一个我很快发现的错误，我将 white 作为变量而不是“white”作为字符串。

【讨论】：

【解决方案3】：

this.style.background 包含不同的信息，如颜色、图像、重复等。

pickedColor 是一个只有“RGB(x,y,z)”的字符串。

正确的问题是：为什么它们应该相同？

Here 更多关于 this.style.background

编辑：

在实践中检查您的RGB 被转换为rgb

【讨论】：

this.style.background 指的是 squares[i]，在这种情况下，当我单击颜色 [i] 时，它指的是颜色 [i]
@DaniRashba 你试过打印到控制台吗？
@DaniRashba 我检查了，它转换为“rgb(100, 100, 100)”，小写。