jquery ColorPicker not show

Question

I Have The Following code to show ColorPicker when click button

The issue

<div class="main_container">
  <button type="button" class="change_color">change color</button>
  <div  style="display:none;"  class="change_container">
    <div class="BackgroundPopup_colorView__U3of1">
    <div class="picker_launcher" style="background: rgb(255, 255, 255); width: 24px; height: 24px; border: 1px solid rgb(208, 213, 221); box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px; border-radius: 4px;"></div>
    </div>
  </div>
</div>


                
$('.change_color').on("click", function () {
    $(this).closest(".main_container").children(".change_container").show();
    var picker_btn=$(this).closest(".main_container").children(".picker_launcher");

    let picker = new ColorPicker(picker_btn, "#4c0082");
});

Answer 1

@r-tek/colr_pickr

https://www.npmjs.com/package/@r-tek/colr_pickr
Colr Pickr is a vanilla JavaScript color picking component

The provided (in comments) codepen also does not use jquery.

The color_pickr component is vanilla-javascript only and, as such, doesn't understand/recognise jquery objects/collections.

This code (with children() fixed to find())

var picker_btn=$(this).closest(".main_container").find(".picker_launcher");
let picker = new ColorPicker(picker_btn, "#4c0082");

passes a jquery object to ColorPicker which responds with an error

t.setAttribute is not a function

(t because code is min'd)

Instead, your code needs to pass a DOM object. As long as you are sure picker_btn selects an element, you can use:

var picker_btn=$(this).closest(".main_container").find(".picker_launcher");
let picker = new ColorPicker(picker_btn[0], "#4c0082");