jQuery addClass example

Change class name on click in jQuery

by Kelly Hawker

HTML

<script src="https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
<input class="picker" type="text">
<input class="picker2" type="text">

<div class="testClass">
  PALETTE ONE
</div>
<div class="testClass2">
  PALETTE TWO
</div>

CSS

.testClass {
  width: 200px;
  height: 200px;
  margin-top: 30px;
  background: rgba(255, 216, 0, 0.8);
  line-height: 200px;
  text-align: center;
}

JavaScript

function injectStyles(rule) {
          let body = document.querySelector('body');
          let style = document.createElement('style');
          style.textContent = rule;
          body.appendChild(style);
        }

        $(document).ready(function() {
          $(".picker").spectrum({
            color: "#ffd800",
            preferredFormat: "hex",
            showInput: true,
            change: function(color) {
              var tiny = tinycolor(color);
              color.getAlpha();
              color.setAlpha(0.8);
              color.getAlpha();
              injectStyles('.testClass  { background:' + tiny.toRgbString() + '; }');
              $(this).val('test');
            }
          });
          
          $(document).ready(function() {
          $(".picker2").spectrum({
            color: "#ffd800",
            preferredFormat: "hex",
            showInput: true,
            change: function(color) {
              var tiny = tinycolor(color);
              color.getAlpha();
              color.setAlpha(0.8);
              color.getAlpha();
              injectStyles('.testClass2  { background:' + tiny.toRgbString() + '; }');
              $(this).val('test');
            }
          });

        });