My JS code is still keep saying nothing(?) instead of the correct rgb colors, and don't know why?
My JS code is still keep saying nothing(?) instead of the correct rgb colors, and don't know why?
Well, I want to make an rgb color guessing game in JS (+HTML,CSS) and in the for loop, the next line is giving me just space back:
console.log(this.style.background);
Here is the full JS code:
var colors = document.querySelectorAll(".square");
var rgbColors = [
"rgb(21,54,217)",
"rgb(32,255,0)",
"rgb(43,255,255)",
"rgb(32,68,103)",
"rgb(147,54,24)",
"rgb(255,54,217)"
];
var pickedColor = rgbColors[3];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i = 0; i < colors.length; i++)
colors[i].style.backgroundColor = rgbColors[i];
colors[i].addEventListener("click", function()
console.log(this.style.background);
)
And here is my HTML if it's necessary:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RGB guessing game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>The Great <span id="colorDisplay">RGB</span> guessing 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>
<link rel="stylesheet" type="text/css" media="screen" href="rgbGame.css" />
<script src="rgbGame.js"></script>
</body>
</html>
I guess my CSS is not the source of the problem.
Hope you can help me. Thanks, Kristof.
background !== backgroundColor
backgroundColor gives me an error
– Kristóf
Aug 24 at 21:35
well, it works now with backgroundColor. Haha
– Kristóf
Aug 24 at 21:36
2 Answers
2
Since background wasn't set, it will be an empty string.
background
Use console.log(this.style); to show all style properties. You will be able to see that background is an empty string and that backgroundColor contains a string representing the colour information you set earlier.
console.log(this.style);
background
backgroundColor
Element.style.background does not exist and you have not set it for any Element; use Element.style.backgroundColor.
Element.style.background
Element.style.backgroundColor
var colors = document.querySelectorAll(".square");
var rgbColors = [
"rgb(21,54,217)",
"rgb(32,255,0)",
"rgb(43,255,255)",
"rgb(32,68,103)",
"rgb(147,54,24)",
"rgb(255,54,217)"
];
var pickedColor = rgbColors[3];
var colorDisplay = document.querySelector("#colorDisplay");
colorDisplay.textContent = pickedColor;
for (var i = 0; i < colors.length; i++)
colors[i].style.backgroundColor = rgbColors[i];
colors[i].addEventListener("click", function()
console.log(this.style.backgroundColor);
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RGB guessing game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>The Great <span id="colorDisplay">RGB</span> guessing game</h1>
<div id="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
</div>
<link rel="stylesheet" type="text/css" media="screen" href="rgbGame.css" />
<script src="rgbGame.js"></script>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
background !== backgroundColor(jsfiddle.net/3ctnafw8)– Andreas
Aug 24 at 21:33