Question

我制作了一款彩色游戏应用，但我的javascript工作不正常，总是提醒我错误。请帮我纠正这段代码。感谢

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 color to square
    squares[i].style.background = colors[i];

    // add click listeners to squares
    squares[i].addEventListener("click", function(){
        var clickedColor = this.style.background;
        if(clickedColor == pickedColor){
            alert("CORRECT");
        } else {
            alert("WRONG");
        }
    });


}

它始终警告＆＃34;错误＆＃34;并且无法选择正确的。

Answer 1

在元素上应用样式时，样式会标准化。通过在逗号后添加空格来标准化RGB颜色。您需要为数组添加空格。

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)" ]

P.S。这是我的建议 - 学习如何使用开发工具进行调试。否则你会在尝试开发更复杂的东西时遇到困难。

Answer 2

如@timbset所述，"rgb(0, 255, 255)" is not equal to "rgb(0,255,255)"。

下面是一个小提琴的摘录，它使用函数直接比较R，G和B值，而不是比较整个RGB字符串（可能会或可能不会被标准化）。

if (compareColors(clickedColor, pickedColor)) {
    alert("CORRECT");
} else {
    alert("WRONG");
}

...

function compareColors (a, b) {
  return (
    getRGBfromString(a)[0] === getRGBfromString(b)[0] &&
    getRGBfromString(a)[1] === getRGBfromString(b)[1] &&
    getRGBfromString(a)[2] === getRGBfromString(b)[2]
   )
}

function getRGBfromString (rgb) {
  return rgb.substring(4, rgb.length - 1).replace(/ /g, '').split(',')
}

https://jsfiddle.net/mue1wfdm/

Javascript不适用于彩色游戏

2 个答案: