我需要帮助弄清楚为什么这个“if”语句不起作用

Question

我正在尝试使用 HTML、CSS 和 JavaScript（学习）制作一个简单的 rgb 游戏。

我想要发生的是，当您单击一种颜色时，它会显示“正确”或“错误”，而colors[3]的静态值是正确的。 我已经测试了很多东西，我认为它与数字与字符串或相关性有关，但我不知道。 当您单击一种颜色时，它们都会警告“错误”，而不是当您单击正确的颜色时，在这种情况下，颜色 [3]（青色）应该显示“正确”。

谢谢。

 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]; console.log(pickedColor); var colorDisplay = document.querySelector("#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; if(clickedColor === pickedColor){ alert("correct"); } else { alert("wrong"); } }); }

 body { background-color: #232323; } .square { width: 30%; background: purple; padding-bottom: 30%; float: left; margin: 1.66%; } #container { margin: 0 auto; max-width: 600px; } h1 { color: white; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Color Game</title> <link rel="stylesheet" href="colorGame.css"> </head> <body> <h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1> <div id="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <script type="text/javascript" src="colorGame.js"></script> </body> </html>

Answer 1

据我了解，这只是值字符串格式的问题。 pickedColor在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)"
]

Answer 2

您正在比较2个字符串，其中clickedColor具有空格，而pickedColor没有。 或在pickedColor中放置空格，或在clickedColor中删除空白，例如：

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];
console.log(pickedColor);
var colorDisplay = document.querySelector("#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;

      if(clickedColor.replace(/ /g,'') === pickedColor){
        alert("correct");
      } else {
        alert("wrong");
      }
    });
}

Answer 3

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

使用这个，你会很高兴。 从this.background.style获得的输出中有多余的空格。

Answer 4

由于您进行比较，因此该游戏无法正常运行。 浏览器有许多怪癖，其中之一就是它们解释属性的方式。

例如，您假设这两个属性相同：
this.style.background
this.style.background-color

但是，根据浏览器的不同，您可能是错的或正确的。 IE特别是不一致的，并且经常更改this.style.background根本不影响background-color ，因此设置background:red; 并不意味着background-color是红色。 这也不意味着background-color等于rgb(255,0,0)或red或#ff0000 。 这是极其不可预测的。

为了使此游戏正常工作，您需要执行一项称为normalizing的操作 。 这意味着您将编写一个能够处理red ， #ff0000 ， #f00 ， rgba(255,0,0) ， rgba(255,0,0,1)和rgb( 255 , 0 ,0) rgba(255,0,0) rgba(255,0,0,1) rgb( 255 , 0 ,0)并将其转换为一种可以正确比较的特定格式。

Answer 5

您需要在颜色数组中的逗号后写空格！

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

我需要帮助弄清楚为什么这个“if”语句不起作用

问题描述

4 个解决方案

解决方案1
1 已采纳 2016-05-03 20:04:11

解决方案2
1 2016-05-03 20:04:22

解决方案3
1 2016-05-03 20:04:31

解决方案4
1 2016-05-03 20:06:16

解决方案5
0 2016-05-03 20:08:13

我需要帮助弄清楚为什么这个“if”语句不起作用

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-05-03 20:04:11

解决方案2 1 2016-05-03 20:04:22

解决方案3 1 2016-05-03 20:04:31

解决方案4 1 2016-05-03 20:06:16

解决方案5 0 2016-05-03 20:08:13

解决方案1
1 已采纳 2016-05-03 20:04:11

解决方案2
1 2016-05-03 20:04:22

解决方案3
1 2016-05-03 20:04:31

解决方案4
1 2016-05-03 20:06:16

解决方案5
0 2016-05-03 20:08:13