jQuery - Button to Inverse Font Color depending on
's randomized background color

Question

I currently have a JS/Jquery & HTML mini project I'm working on.

The first objective is to individually change and randomize the background color for my <div> elements. I believe I have done this correctly as it seems to be working.

The last objective is to add a button that when "clicked", will inverse the font color inside of each <div> in relation to the randomized background color.

I was given the function to inverse colors as a starting point.

When my button is clicked, nothing is happening. Some help would be appreciated.

HTML:

<body>

<div class='inverseDiv'>
<h1>random text random text</h1>
</div>

<div class='inverseDiv'>
Soccer is my favorite sport<br>
</div>

<div class='inverseDiv'>
<h1>I like to eat hamburgers</h1>
<p>blah blah blah</p>
</div>

<div class='inverseDiv'>
<input type="button" class="btn btn-inverter" value="Click to change font color" id="myButton">
</div>

</body>

JS/jQuery:

function randomColor() {
var hexValues = '0123456789ABCDEF'.split('');
var startColor = '#';
for (var i = 0; i < 6; i++ ) {
    startColor += hexValues[Math.round(Math.random() * 15)];
  }
return startColor;
}

$(function() {
    $(".inverseDiv").each(function() {
        $(this).css("background-color", randomColor());
    });
});

$(document).ready(function(){
  $('#myButton').click(function invertColor(hexTripletColor) {

var color = hexTripletColor;

color = color.substring(1); // remove #

color = parseInt(color, 16); // convert to integer

color = 0xFFFFFF ^ color; // invert three bytes

color = color.toString(16); // convert to hex

color = ("000000" + color).slice(-6); // pad with leading zeros

color = "#" + color; // prepend #

return color;
    }); 
});

link to my fiddle: http://jsfiddle.net/bchang89/r74j6/495/

One of your problems here is that your parameter `hexTripletColor` are the event arguments in your function and not your color. I agree with the answer Rayon Dabre has given you. — Jorrex, Mar 31 '16 at 07:16
How would I change the font color in my div with the button? The div background color should randomize every time the screen is refreshed. @Jorrex — brianchangdev, Apr 01 '16 at 00:24

score 2 · Answer 1 · edited May 23 '17 at 10:28

Use $(".inverseDiv").each(function() { in click handler to apply your inverse logic over all the elements.

Also use data-* attribute to store the hex value of the color as data attribute.

Note: As Jorrex mentioned in comment, hexTripletColor argument in the handler will be event not the color value. If you want to toggle clicked element, then you can use $(this).closest('.inverseDiv') to manipulate css of the element.

function randomColor() {
  var hexValues = '0123456789ABCDEF'.split('');
  var startColor = '#';
  for (var i = 0; i < 6; i++) {
    startColor += hexValues[Math.round(Math.random() * 15)];
  }
  return startColor;
}

$(function() {
  $(".inverseDiv").each(function() {
    var color = randomColor();
    $(this).css("background-color", color);
    $(this).data('color', color);
  });
});

$(document).ready(function() {
  $('#myButton').click(function invertColor() {
    $(".inverseDiv").each(function() {
      var color = $(this).data('color');
      color = color.substring(1); // remove #
      color = parseInt(color, 16); // convert to integer
      color = 0xFFFFFF ^ color; // invert three bytes
      color = color.toString(16); // convert to hex
      color = ("000000" + color).slice(-6); // pad with leading zeros
      color = "#" + color; // prepend #      
      $(this).css("background-color", color);
      $(this).data('color', color);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='inverseDiv'>
  <h1>random text random text</h1>
</div>
<div class='inverseDiv'>
  Soccer is my favorite sport
  <br>
</div>
<div class='inverseDiv'>
  <h1>I like to eat hamburgers</h1>
  <p>blah blah blah</p>
</div>
<div class='inverseDiv'>
  <input type="button" class="btn btn-inverter" value="Click to change font color" id="myButton">
</div>

Updated fiddle

Amazing, thank you for your help. I would like to know however the reasoning behind adding $(this).data('color', color); to the inverseDiv jquery function that changes the div color. — brianchangdev, Mar 31 '16 at 18:51
Ah, makes sense. I noticed that when the button is clicked, it looks like the div background colors are changing, not the font colors. The way I had it set up was that the div background colors would change every time the page is refreshed. The button was supposed to change the font color in the div, inversely with the div background color. — brianchangdev, Mar 31 '16 at 19:38
Use `$(this).css("color", color);` to change the `color` instead of `$(this).css("background-color", color);` — Rayon, Apr 01 '16 at 00:44
http://jsfiddle.net/rayon_1990/r74j6/497/ using `.one` to make it happen only once.. — Rayon, Apr 01 '16 at 00:48

score 0 · Answer 2 · edited May 23 '17 at 12:07

Try this

function randomColor() {
    var hexValues = '0123456789ABCDEF'.split('');
    var startColor = '#';
    for (var i = 0; i < 6; i++ ) {
        startColor += hexValues[Math.round(Math.random() * 15)];
    }
    return startColor;
}

var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

$(function() {
    $(".inverseDiv").each(function() {
        $(this).css("background-color", randomColor());
    });
});

$(document).ready(function(){
  $('#myButton').click(function () {
        $(".inverseDiv").each(function() {
        var color = rgb2hex($(this).css("background-color"));

                color = color.substring(1); // remove #

                color = parseInt(color, 16); // convert to integer

                color = 0xFFFFFF ^ color; // invert three bytes

                color = color.toString(16); // convert to hex

                color = ("000000" + color).slice(-6); // pad with leading zeros

                color = "#" + color; // prepend #

                $(this).css("color", color);
        });
    }); 
});

It uses a method from How to get hex color value rather than RGB value? to convert rgb values to hex.

jQuery - Button to Inverse Font Color depending on 's randomized background color

2 Answers2

jQuery - Button to Inverse Font Color depending on
's randomized background color