我需要幫助弄清楚為什么這個“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