How do I target a div when selecting a colour?

[Befuddled-Monkey]

How do I also apply the color change to a div?

[LCweb-ita]

Do you mean, after user picked a color?

[Befuddled-Monkey]

Yes! I tried every classical method I found, nothing is working. I'm a beginner, so much of this is kind of Chinese to me.

I guess it has to do with this line?

document.querySelector('lccp_gradient:not('lccp_gradient-bg').style.background = active_gradient;

[LCweb-ita]

You have to use the on_change parameter

new lc_color_picker('input', {

    // (function) triggered every time field value changes. Passes value and target field object as parameters
    on_change :  function(new_value, target_field) {
          // target DIV and apply color
    },
});

[Befuddled-Monkey]

Must be something like this? But what do I do with target_value?

new lc_color_picker('input[name="simple"]', {
            modes           : ['solid'],
            transparency    : true,
            open_on_focus   : true,
            wrap_width      : '100%',
            preview_style   : {
                input_padding   : 45,
                side            : 'left',
                width           : 40,
            },
            fallback_colors : ['rgb(115, 26, 244)'],

            on_change :  function(new_value, target_field) {
                var bggg = document.getElementsById('body_bggg');
                bggg.style.backgroundColor = new_value;
            },
        });

[Befuddled-Monkey]

I don't blame you if you are in a facepalm session now, but please give me something more explicit to go on.

[LCweb-ita]

What is "target_value"? Your code is correct

on_change :  function(new_value, target_field) {
    var bggg = document.getElementsById('body_bggg');
    bggg.style.backgroundColor = new_value;
},

should work fine

[Befuddled-Monkey]

Upss, sorry, I meant target_field. How do I use target_field in this? And it doesn't work. Div 'body_bggg' doesn't change color.

[Befuddled-Monkey]

I got it to work with the 'simple' input.

HTML code:

<input type="text" name="simple" id="simple" value="rgba(115, 26, 244, 0.66)" onkeypress="changeColor()" />
<div id="body_bggg" class="body_bggg">blahahaha</div>

Javascript:

function changeColor(){

        var  bggg = document.querySelector('#body_bggg');
        bggg.style.backgroundColor = document.querySelector("#simple").value;

    };

I tried to apply the same logic to the 'full' input, but the div color doesn't change.