I am creating an simple etch a sketch design and need to create function that will input randomized colors upon hovering over the grid. So far I have created functions that some specific colors but I'm not sure where to go from there.
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') )
}
I did something very similar in Angular which I have shown here. This is for reference. Please modify syntax if required.
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(',') + ')';
}