2
私はHTML、CSS、およびJavaScript（学習）を使って簡単なrgbゲームを作ろうとしています。私はこの 'if'文がうまくいかない理由を理解するのに助けが必要です
色をクリックすると、「正しい」または「間違った」と表示され、静的な値は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>
ようこそ！何かがうまくいかないと言ったら、実際に何が働いていないのか教えてください。考えられない振る舞いが起こっていますか？コンソールでエラーが発生していますか？ – azium
最初に追加します。基本的には、正しい色（この場合は[3]（シアン色））をクリックする代わりに、色をクリックすると「間違っている」という警告が表示されます。コンソールにエラーはありません。 – nateph
コンソール出力に 'clickedcolor'と' pickedcolor'の両方を行い、違いが –