Javascript 使用颜色选择器更改DIV颜色

我的头撞在这里的墙上。此代码没有理由不工作，但它不工作

我希望用户能够使用jscolor选择颜色我不想使用type=color，因为它可能不适用于我的一些用户。一旦他们选择了一种颜色，就需要更改div的背景色

当我在输入中使用type=color时，它可以工作。但它不能与jscolor脚本一起工作

我的代码：

Javascript:

HTML：输入

HTML：应该更改的div

 <div id="background" class="background" style="position: absolute; 
       background-color: #2e2e2e; width: 247px; height: 335px; 
       overflow: scroll; overflow-x: hidden;">

---

代码中有三个问题

1>将出现在脚本末尾，您应该删除该脚本

2您正试图使用类选择器来选择您的后台div，您应该在其中使用ID选择器作为$background

3您应该在选定值的前面加上前缀。它应该是var valueSelected=+this.value

工作演示：

希望这有帮助

从以下位置导入了jscolor.js： 根据演示将数据从类名分离到属性数据jscolor。 代码：

---

非常感谢你。我甚至没有看到>哈哈。只是厌倦了搞乱它而忽略了它。这是完美的工作了。

<input style="width:100px;" class="jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" id="bgcolor" name="bgcolor" value="2e2e2e" />

 <div id="background" class="background" style="position: absolute; 
       background-color: #2e2e2e; width: 247px; height: 335px; 
       overflow: scroll; overflow-x: hidden;">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jscolor.js"></script>
<script>
    $(document).ready(function(){

        $('#bgcolor').on('change', function (e) {

            var optionSelected = $("option:selected", this);
            var valueSelected = this.value;
            $(".background").css("background-color", valueSelected);
        });
    });
</script>
<input style="width:100px;" class="jscolor" data-jscolor="{width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" id="bgcolor" name="bgcolor" value="2e2e2e" />

<div id="background" class="background" style="position: absolute; background-color: #2e2e2e; width: 247px; height: 335px; overflow: scroll; overflow-x: hidden;"></div>