使用颜色选择器更改wordpress小部件区域文本，背景颜色

In my Wordpress blog, I have created a widget which has 3 color pickers as input fields. Each of them for letting the widget user customize the color of text, background and button color. Now the problem is, I have not been able to come up with a working solution. Here is what I have tried:

<script type="text/javascript">
    document.getElementById("wid-small-div").style.color = <?php echo '"#' . $instance['text-color'] . '"';?>;
    document.getElementById("wid-small-div").style.background = <?php echo '"#' . $instance['bg-color'] . '"';?>;
</script>

This script is written in the widget($args, $instance) function of my widget class.

Also, using this javascript at the same place with only the div changed for my shortcode, works for the shortcode. Why does it not work for the widget?

The div id of the widget is "wid-small-div".

What can be the solution? Thank you.