I am trying to make a small game using HTML, CSS and Javascript.
The HTML and CSS and most of the Javascript code appear to be working fine. However, when launch the program in FireFox and try to click a square div whose background RGB value matches that of a RGB value stored in a variable I get the wrong answer. It is suppose to alert the user with "Correct" but instead all the alerts are outputting "Wrong".
Here is the HTML file
<!DOCTYPE>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorGame3.css">
</head>
<body>
<h1>
RGB Color Game
<span id = "colorDisplay">
RGB
</span>
</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="colorGame3.js"></script>
</body>
</html>
Here is the CSS file
body{
background-color: #232323;
}
.square{
width:30%;
background:purple;
padding-bottom:30%;
float:left;
margin:1.66%;
}
#container{
max-width:600px;
margin:20px auto;
}
Here is the JavaScript file
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[2];
var colorDisplay = document.getElementById("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");
}
});
}
Aucun commentaire:
Enregistrer un commentaire