如何更新点击的元素？

Question

I am making a drawing board and I wish to get the color I click on. The problem: I only get the color I click on first. My idea: get the value by id and give it the appropriate color. Here is my code:

<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

You can get the color from element itself

Example:

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