Question

if语句不起作用，即使颜色匹配，也会转到else语句

请告诉我这个错误在哪里？

var colors = [
    "rgb(255,0,0)",
    "rgb(255,255,0)",
    "rgb(0,255,0)",
    "rgb(0,255,255)",
    "rgb(0,0,255)",
    "rgb(255,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++) {
    //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 squares
        var clickedColor = this.style.background;
        //compare color to pickedColor
        if (clickedColor === pickedColor) {
            alert("correct");
        }
        else {
            alert("wrong");
        }
    });
};

Answer 1

两个问题：

浏览器不一定会以您用来设置它的符号返回颜色值。例如，您可能会返回rgba(255,0,0,0)而不是rgb(255,0,0)。
您正在使用background复合属性，因此浏览器可能会回馈的不仅仅是背景颜色（backgroundColor）。

相反，将颜色存储为数据属性，以便您可以比较字符串，而无需担心浏览器使用的表示形式。

另请注意，没有理由在每个循环上重新创建该函数;只需对所有元素使用单个函数：

var colors = [
    "rgb(255,0,0)",
    "rgb(255,255,0)",
    "rgb(0,255,0)",
    "rgb(0,255,255)",
    "rgb(0,0,255)",
    "rgb(255,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++) {
    //add initial colors to squares
    squares[i].style.backgroundColor = colors[i];       // ***
    squares[i].setAttribute("data-color", colors[i]);   // ***

    // add click listeners to squares
    squares[i].addEventListener("click", clickHandler); // ***
}
function clickHandler() {
    //grab color of clicked squares
    var clickedColor = this.getAttribute("data-color"); // ***
    //compare color to pickedColor
    if (clickedColor === pickedColor) {
        alert("correct");
    }
    else {
        alert("wrong");
    }
}

旁注：连接到控制结构的块后面没有;（尽管放置一个是无害的）。但是你确实在;（例如你的初始颜色数组）中将var放在初始值之后;将其关闭依赖于JavaScript的自动分号插入错误纠正机制。

为什么我的javascript代码没有像我期望的那样表现

1 个答案: