CODEWITHSUNDEEP
javascriptjquerycolorsbackground
Karaaa006
Karaaa006

Reputation: 21

Why is the previous background color recorded in the variable C?

I want to make an application that would output a random color. But the color code is output the previous one. Why is the previous background color recorded in the variable C? Help plz. My english so bad, sry. I just started learning jquery.

function getNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getColor(n) {
  $(".color" + n).css(
    "background-color",
    "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")"
  );
  var c = $(".color" + n).css("backgroundColor");
  $(".color" + n).text(c)
};

$("#randcolor").click(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});

$(document).ready(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color1 color"></div>
<div class="color2 color"></div>
<div class="color3 color"></div>

Upvotes: 1

Views: 68

Answers (2)

omikes
omikes

Reputation: 8543

Edit: Refactored for added wizardry including Terry's jQuery method chaining suggestion:

function getNum(str, char) {
  return str + Math.floor(Math.random() * 257) + char;
}

function getColor() {
  var color = "rgb" + [..."(,,)"].reduce(getNum);
  $(this).css("background-color", color).text(color);
};

function changeColors() {
  $.each($(".color"), getColor);
}

$("#randcolor").click(changeColors);

$(document).ready(changeColors);
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

Upvotes: 0

Terry
Terry

Reputation: 66228

The reason is quite simple: you have CSS transitions enabled, so the background color takes time to transition to the next colour. This transition occurs asynchronously, but you are reading the background color immediately after it is set, when the background colour has not fully transitioned. The .css() method uses window.getComputedStyle(), which means it gets whatever background colour the element is currently at, regardless of its transitioning status.

What I can suggest is that you simply generate the color and store it in a variable, and then use it to set both .css() and .text(), as per my comment. In this way, you also get to take advantage of chaining in jQuery:

var backgroundColor = "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")";
$(".color" + n)
    .css("background-color", backgroundColor)
    .text(backgroundColor);

See proof-of-concept below:

function getNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getColor(n) {
  var backgroundColor = "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")";
  $(".color" + n).css(
    "background-color",
    backgroundColor
  ).text(backgroundColor);
};

$("#randcolor").click(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});

$(document).ready(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color1 color"></div>
<div class="color2 color"></div>
<div class="color3 color"></div>

Upvotes: 1

Related Questions