若陈述总是错误的，为什么

If statement is always false, WHY?

本文关键字：为什么 错误 陈述总      更新时间：2023-09-26

尽管有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.
    }
})
}

当您执行分配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>

我想通了！！！！

出于某种原因，我应该写rgb而不是rgb，这导致了另一个错误，我很快就发现了，我把white写为变量，而不是把"white"写为字符串。

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

pickedColor是一个只有"RGB（x，y，z）"的字符串。

正确的问题是：为什么它们应该是一样的？

这里有更多关于这个的信息。style.background

编辑：

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

相关文章：