How to write a function that will return colors at random for a drawing pad

user_19120987 0
Viewed 60

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') )
   }
javascript
1 Answers

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(',') + ')';
 }
user_85808550
Related