在颜色选择器中获取背景颜色

Question

I have to design a color picker with fixed values. As I'm a newbie to web programming I'm not sure how to proceed. The task is to get background color on selecting a palette's background and with that color, another div element's background has to change.

In this HTML #palette has 30 colors, color-1 to color-30 . On selecting the color from the palette the background of .color-container has to change. Thanks in advance.

 <div id="palette"> <div class="row"> <div class="colors" id="color-1"></div> <div class="colors" id="color-2"></div> <div class="colors" id="color-3"></div> <div class="colors" id="color-4"></div> <div class="colors" id="color-5"></div> <div class="colors" id="color-6"></div> </div> <div class="row"> <div class="colors" id="color-7"></div> <div class="colors" id="color-8"></div> <div class="colors" id="color-9"></div> <div class="colors" id="color-10"></div> <div class="colors" id="color-11"></div> <div class="colors" id="color-12"></div> </div> <div class="row"> <div class="colors" id="color-13"></div> <div class="colors" id="color-14"></div> <div class="colors" id="color-15"></div> <div class="colors" id="color-16"></div> <div class="colors" id="color-17"></div> <div class="colors" id="color-18"></div> </div> <div class="row"> <div class="colors" id="color-19"></div> <div class="colors" id="color-20"></div> <div class="colors" id="color-21"></div> <div class="colors" id="color-22"></div> <div class="colors" id="color-23"></div> <div class="colors" id="color-24"></div> </div> <div class="row"> <div class="colors" id="color-25"></div> <div class="colors" id="color-26"></div> <div class="colors" id="color-27"></div> <div class="colors" id="color-28"></div> <div class="colors" id="color-29"></div> <div class="colors" id="color-30"></div> </div> </div> <div class="color-container"> <h1 style="color: black" id="container-text">Text</h1> </div>

Answer 1

You need to detect which div was clicked, all yours div elements has same colors class so that must be your selector, after that you need to extract the click div id. You can get it doing this:

$('.colors').on('click', function () {
    var colorid = this.id;    
});

After that you can play with colorid value, I don't know how you going to specify which color is id color-1, color-2, etc. So just as an example I use a switch so your code is the following.

 $(document).ready(function () { $('.colors').on('click', function () { var colorid = this.id; switch(colorid) { case "color-1": $('.color-container h1').css("color", "red"); break; case "color-2": $('.color-container h1').css("color", "blue"); break; case "color-3": $('.color-container h1').css("color", "yellow"); break; case "color-4": $('.color-container h1').css("color", "orange"); break; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="palette"> <div class="row"> <div class="colors" id="color-1">1</div> <div class="colors" id="color-2">2</div> <div class="colors" id="color-3">3</div> <div class="colors" id="color-4">4</div> <div class="colors" id="color-5"></div> <div class="colors" id="color-6"></div> </div> <div class="row"> <div class="colors" id="color-7"></div> <div class="colors" id="color-8"></div> <div class="colors" id="color-9"></div> <div class="colors" id="color-10"></div> <div class="colors" id="color-11"></div> <div class="colors" id="color-12"></div> </div> <div class="row"> <div class="colors" id="color-13"></div> <div class="colors" id="color-14"></div> <div class="colors" id="color-15"></div> <div class="colors" id="color-16"></div> <div class="colors" id="color-17"></div> <div class="colors" id="color-18"></div> </div> <div class="row"> <div class="colors" id="color-19"></div> <div class="colors" id="color-20"></div> <div class="colors" id="color-21"></div> <div class="colors" id="color-22"></div> <div class="colors" id="color-23"></div> <div class="colors" id="color-24"></div> </div> <div class="row"> <div class="colors" id="color-25"></div> <div class="colors" id="color-26"></div> <div class="colors" id="color-27"></div> <div class="colors" id="color-28"></div> <div class="colors" id="color-29"></div> <div class="colors" id="color-30"></div> </div> </div> <div class="color-container"> <h1 style="color: black" id="container-text">Text</h1> </div>

This should solve your problem.