我需要幫助搞清楚爲什麼這個'如果'陳述不會工作

我想使用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>

來源

2016-05-03 nateph

歡迎使用堆棧！當你說某些事情沒有奏效時，讓我們知道實際上什麼都不起作用。發生了什麼不應該發生的行爲？你是否在控制檯中發生錯誤？ – azium

我會將它添加到開頭。基本上，當你點擊一種顏色時，他們都會警告「錯誤」，而不是點擊正確的顏色，在這種情況下，顏色[3]（青色），它應該顯示「正確」。控制檯中沒有錯誤。 – nateph

執行'clickedcolor'和'pickcolor'的控制檯輸出，看看有什麼不同 –

至於我想通了，它只是與值的字符串格式化的問題。 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)" 
]

來源

2016-05-03 20:04:11 Keiwan

您正在比較2個字符串，至少clickedColor具有空格和pickedColor dont。或把空格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"); 
     } 
    }); 
}

來源

2016-05-03 20:04:22 fdfey

謝謝！我不知道rgb規格的格式。 – nateph

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獲得的輸出中有多餘的空格。

來源

2016-05-03 20:04:31 Nirri

謝謝！我不知道rgb規格的格式。 – nateph

由於您如何進行比較，此遊戲無法正常工作。瀏覽器有許多怪癖，其中之一就是它們如何解釋屬性。

例如，你會認爲這兩個屬性是相同的：
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)的函數，並將其轉換爲可以正確比較的一種特定格式。

來源

2016-05-03 20:06:16 Josh

謝謝！我不知道rgb規範的格式。 – nateph

你需要在顏色數組中逗號後面寫空格！

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

來源

2016-05-03 20:08:13

我需要幫助搞清楚爲什麼這個'如果'陳述不會工作

回答

相關問題