jquery and the dom

by Rayon Dabre

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>

JavaScript

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



  });
});