如何更新点击的元素？

Question

我正在制作一个绘图板，我希望得到我点击的颜色。问题：我只得到我首先点击的颜色。我的想法：通过 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>

Answer 1

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

例子：

<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;

    canvas.freeDrawingBrush.color = colorBox.style['background-color']
  }

</script>