我需要帮助弄清楚为什么;如果'声明不起作用

I need help figuring out why this 'if' statement wont work

本文关键字：如果 声明 不起作用 为什么 帮助 弄清楚      更新时间：2023-09-26

我正在尝试使用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>

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

您正在比较两个字符串，其中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");
      }
    });
}

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.

获得的输出中有额外的空间

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

例如，您可以假设这两个属性是相同的：
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。它"极不可预测"。

为了让这个游戏发挥作用，你需要做一个叫做规范化的操作。这意味着您将编写一个能够处理red、#ff0000、#f00、rgba(255,0,0)、rgba(255,0,0,1)和rgb( 255 , 0 ,0)的函数，并将其转换为一种特定的格式，然后进行正确比较。

相关文章：