CODEWITHSUNDEEP
javascripthtmlcssdom
Michael Zeta
Michael Zeta

Reputation: 42

No errors thrown but I still can't assign backgroundColor with a variable containing an RGB string

So I'm trying to make a simple random color guessing game to practice DOM manipulation. I have a random number generator to give me values for red, green, and blue from 0-255 and then assign them to a variable called randomColor with a value of a concatenated string that holds the randomized red, green, and blue values.

The problem I can't seem to solve is why assigning the randomColor variable as the backgroundColor property for the square in the HTML doesn't take effect. The console doesn't log any errors but if I console.log the squares backgroundColor it's always an empty string. How can I reassign the squares' backgroundColor to the RGB string held in randomColor?

var squares = document.querySelectorAll(".square");

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

for (var i=0; i<squares.length; i++) {
    let red = getRandomInt(256);
    let green = getRandomInt(256);
    let blue = getRandomInt(256);
    let randomColor = "rgb("+red+", "+green+", "+blue+");";
    squares[i].style.backgroundColor = randomColor;
}
html {
    box-sizing: border-box;
}

body {
    background-color: #222222;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 2% 0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.top {
    background-color: white;
    margin-top: 0;
    padding-top: 0;
}

.stripe {
    padding: 0;
    background-color: steelblue;
    color: white;
}

.stripe p {
    margin: 0 auto;
    padding-top: 3%;
}

.square {
    display: inline-block;
    width: 30%;
    padding-bottom: 33%;
    margin: 2px;
    border-radius: 5%;
    background-color: magenta;
}

.heading {
    font-size: 2em;
    margin-top: 0;
    padding: 2% 0;
}

.text-center {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>The Great RGB Guessing Game</title>
    <link rel="stylesheet" href="syles.css" type="text/css" />
  </head>
  <body>
    <div class="top">
      <h1 class="heading text-center">The Great<br><span>Color</span><br>Guessing Game</h1>
      <div class="stripe">
        <div class="container">
          <h2>Reset</h2>
          <p>Try again</p>
          <h2><span>Easy</span> | <span>Hard</span></h2>
        </div><!-- /.container -->
      </div><!-- /.stripe -->
    </div>
    <div class="container">
      <div class="square" id="square1"></div>
      <div class="square" id="square2"></div>
      <div class="square" id="square3"></div>
      <div class="square" id="square4"></div>
      <div class="square" id="square5"></div>
      <div class="square" id="square6"></div>
    </div>
    <script type="text/javascript" src="color-game.js"></script>
  </body>
</html>

Upvotes: 0

Views: 58

Answers (3)

Holden
Holden

Reputation: 109

Try removing the internal semicolon from:

let randomColor = "rgb("+red+", "+green+", "+blue+");";

I believe it is messing with your results.

let randomColor = "rgb("+red+", "+green+", "+blue+")";

The above works for me just fine! Looks good.

Upvotes: 0

Saurabh Sarathe
Saurabh Sarathe

Reputation: 231

You just have to remove the extra unwanted ";" from you javascript

randomColor = "rgb("+red+", "+green+", "+blue+")";

Upvotes: 1

Titus
Titus

Reputation: 22484

The problem is the semicolon (;) at the end of the backgroundColor value.

So, instead of "rgb("+red+", "+green+", "+blue+");" use "rgb("+red+", "+green+", "+blue+")"

If you remove that, the JS should work correctly.

var squares = document.querySelectorAll(".square");

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

for (var i=0; i<squares.length; i++) {
    let red = getRandomInt(256);
    let green = getRandomInt(256);
    let blue = getRandomInt(256);
    let randomColor = "rgb("+red+", "+green+", "+blue+")";
    squares[i].style.backgroundColor = randomColor;
}
html {
    box-sizing: border-box;
}

body {
    background-color: #222222;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 2% 0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.top {
    background-color: white;
    margin-top: 0;
    padding-top: 0;
}

.stripe {
    padding: 0;
    background-color: steelblue;
    color: white;
}

.stripe p {
    margin: 0 auto;
    padding-top: 3%;
}

.square {
    display: inline-block;
    width: 30%;
    padding-bottom: 33%;
    margin: 2px;
    border-radius: 5%;
    background-color: magenta;
}

.heading {
    font-size: 2em;
    margin-top: 0;
    padding: 2% 0;
}

.text-center {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>The Great RGB Guessing Game</title>
    <link rel="stylesheet" href="syles.css" type="text/css" />
  </head>
  <body>
    <div class="top">
      <h1 class="heading text-center">The Great<br><span>Color</span><br>Guessing Game</h1>
      <div class="stripe">
        <div class="container">
          <h2>Reset</h2>
          <p>Try again</p>
          <h2><span>Easy</span> | <span>Hard</span></h2>
        </div><!-- /.container -->
      </div><!-- /.stripe -->
    </div>
    <div class="container">
      <div class="square" id="square1"></div>
      <div class="square" id="square2"></div>
      <div class="square" id="square3"></div>
      <div class="square" id="square4"></div>
      <div class="square" id="square5"></div>
      <div class="square" id="square6"></div>
    </div>
    <script type="text/javascript" src="color-game.js"></script>
  </body>
</html>

Upvotes: 2

Related Questions