Jscolor previewElement

[nimasdj]

I use the code below to use jscolor:

<script src="jscolor.js"></script>
<p>
    Large preset:
    <input value="#AA0000" data-jscolor="{preset:'large', position:'right',closeButton:true, closeText:'Close', backgroundColor:'#FFFFFF', buttonColor:'#000000', previewElement:'#pr1'}">
</p>
<em id="pr1" style="display:inline-block; padding:1em;">previewElement</em>

It works fine when I change color. But on page load the preview background is showing jscolor default, not my set value as #AA0000. I guess I am doing something wrong with previewElement:'#pr1'.
https://jscolor.com/docs/#api--opts--previewElement

What should I do to fix it?
PS. strangely enough it works fine on their sandbox, but still the problem above on my own html page. my html page does not contain anything other than code above. Please advise.

[m_hutley]

Works on the jscolor site… you sure you’re using the latest version of jscolor.js?

[nimasdj]

Beside jscolor, is there any other color picker?

[Thallius]

Have you tried to put

document.getElementByID('pr1')

as previewElement?

[DaveMaxwell]

Like you said, the code you’ve posted works on the jscolor sandbox. Do you have any errors in your developer tools? Or do you have any other css which may be overriding?

Can you provide a link to your site? Would make it easier to debug the problem.

[Paul_Wilkins]

What you’ve done seems to be working fine when I try it out on jsfiddle, using jscolor 2.4.7 at https://jsfiddle.net/pmw57/0dzwakgy/

I can instead use other versions by obtaining them from CDNs.

Which version of jscolor are you using? Perhaps I can duplicate your problem using your same version?