Javascript 如何更新单击的元素?

Javascript 如何更新单击的元素?,javascript,function,onclick,this,Javascript,Function,Onclick,This,我正在做一个绘图板,我希望得到我点击的颜色。问题是:我只得到我首先点击的颜色。我的想法是:通过id获取值,并给它适当的颜色。这是我的密码: <script> var colorNames = ["fuchsia","maroon", "red", "olive", "yellow", "green","lime", &q

我正在做一个绘图板,我希望得到我点击的颜色。问题是:我只得到我首先点击的颜色。我的想法是:通过id获取值,并给它适当的颜色。这是我的密码:

<script>

            var colorNames = ["fuchsia","maroon", "red", "olive", "yellow", "green","lime", "teal", "aqua", "navy", "blue", "purple","black", "gray", "silver","white"];
            for (var i = 0; i < 16; i++) {
                document.write(`<div id="color${i}" class="color" style="background-color:${colorNames[i]}" onclick="draw(this)"></div>`);
            

            }
        console.log(colorNames)

        function draw(colorBox){

            var ChosenColorBox = colorBox.id;          
            console.log(ChosenColorBox)  
            var canvas = new fabric.Canvas("canvas");
           

            canvas.isDrawingMode = true;
            canvas.freeDrawingBrush.width = 5;
           
            
             if(ChosenColorBox=="color0"){
              canvas.freeDrawingBrush.color = "fuchsia";    
             }
            else if (ChosenColorBox=="color1")
            { 
               canvas.freeDrawingBrush.color = "maroon";
            }
    }
              
        




        </script>

var colorNames=[“紫红色”、“栗色”、“红色”、“橄榄色”、“黄色”、“绿色”、“青柠色”、“水蓝色”、“海军蓝色”、“蓝色”、“紫色”、“黑色”、“灰色”、“银色”、“白色”];
对于(变量i=0;i<16;i++){
文件。写(``);
}
console.log(颜色名称)
函数绘图(颜色框){
var ChosenColorBox=colorBox.id;
console.log(ChosenColorBox)
var canvas=newfabric.canvas(“画布”);
canvas.isDrawingMode=true;
canvas.freeDrawingBrush.width=5;
如果(ChosenColorBox==“color0”){
canvas.freedrawingprush.color=“紫红色”;
}
else if(ChosenColorBox==“color1”)
{ 
canvas.freedrawingprush.color=“栗色”;
}
}

您可以从元素本身获取颜色

例如:


var colorNames=[“紫红色”、“栗色”、“红色”、“橄榄色”、“黄色”、“绿色”、“青柠色”,
"青色,"水蓝,"海军蓝,"蓝色,"紫色,"黑色,"灰色,"银色",";
对于(变量i=0;i<16;i++){
文件。写(``);
}
console.log(颜色名称)
函数绘图(颜色框){
var ChosenColorBox=colorBox.id;
console.log(ChosenColorBox)
var canvas=newfabric.canvas(“画布”);
canvas.isDrawingMode=true;
canvas.freeDrawingBrush.width=5;
canvas.freeDrawingBrush.color=colorBox.style['background-color']
}

也许可以看看这个例子:我试过了,但还是得到了相同的颜色,尽管我点击了不同的颜色。除非刷新页面,否则无法从第一个页面获得不同的颜色。我不知道如何清除我以前的选择。