由于這是一個 Etch-a-Sketch 剽竊，我需要能夠不按順序對 div 進行著色，但是，我設置的 for 循環會遍歷每個方塊，并在僅接觸其中一個方塊后將它們全部著色。JavaScript：const container = document.getElementById("container");        function makeRows (rows, columns) {        container.style.setProperty('--grid-rows', rows);        container.style.setProperty('--grid-cols', columns);        for (c = 0; c < (rows * columns); c++) {            let cell = document.createElement("div");            //cell.innerText = (c + 1);            container.appendChild(cell).className = "grid-item";        }        }        //Draw Board    makeRows(16, 16);        //Paint on board    const paint = document.querySelector("div.grid-item");            paint.addEventListener('mouseover', function(){            let paintBrush = document.getElementsByClassName('grid-item');                        for (let i = 0; i < paintBrush.length; i++)            {                paintBrush[i].style.backgroundColor = "black";            }            console.log("AHH HELP AHH");                });CSS：:root {    --grid-cols: 0;    --grid-rows: 0;  }    #container {    display: grid;    padding: 10em;    height: 40vh;    width: 50vh;    margin-left: auto;    margin-right: auto;    grid-template-rows: repeat(var(--grid-rows), 1fr);    grid-template-columns: repeat(var(--grid-cols), 1fr);      }    .grid-item {    padding: 1em;    border: 1px solid #ddd;    text-align: center;  }