Estoy creando un diseño de boceto de grabado simple y necesito crear una función que ingrese colores aleatorios al pasar el mouse sobre la cuadrícula. Hasta ahora he creado funciones con algunos colores específicos, pero no estoy seguro de adónde ir desde allí.
const grid = document.querySelector('.grid'); const blackButton = document.querySelector('.blackbutton'); blackButton.addEventListener('click', blkButton); const clear = document.querySelector('.clearbutton') clear.addEventListener('click', clearGrid); const eraserButton = document.querySelector('.eraserbutton') eraserButton.addEventListener('click', ersButton) const rainbowButton = document.querySelector('.rainbowbutton') rainbowButton.addEventListener('click', rbwButton) function getGrid(gridNumber) { for (let i = 1; i <= gridNumber * gridNumber; i++) { const box = document.createElement('div'); box.classList.add('box'); grid.appendChild(box); } } getGrid(16); function blkButton() { grid.querySelectorAll(".box").forEach(box => box.addEventListener("mouseover", () => { box.style.background = "black"; })) } function ersButton(){ grid.querySelectorAll(".box").forEach(box => box.addEventListener("mouseover", () => { box.style.background = "lightgray" })) } function rbwButton(){ } function clearGrid() { const tgt = ".box" grid.querySelectorAll(".box").forEach(box => box.removeAttribute('style') ) }Hice algo muy similar en Angular que he mostrado aquí. Esto es para referencia. Modifique la sintaxis si es necesario.
function blkButton() { grid.querySelectorAll(".box").forEach(box => box.addEventListener("mouseover", () => { box.style.background = this.getColor(); })) } rgb = []; function getColor(){ for (var i = 0; i < 3; i++) { this.rgb.push(Math.floor(Math.random() * 255)); } return 'rgb(' + this.rgb.join(',') + ')'; }