Mike Smith Mike Smith - 7 months ago 22
HTML Question

Simple Javascript file not working properly

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");
}
});
}

Zak Zak
Answer

Your colors pickedColor and clickedColor do not match even though they both "technically" work in CSS. this.style.background; is inserting a space between each color. They need to look like this ...

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