javascript function randomColor() output to css backgroudColor property not working

Question

this is my first question in here, Im just starting to learn javascript. This is part of and exercise in the odin proyect foundation course(etch-a-sketch).

I need to put the output of a function as the value of backgroundColor like this a.style.backgroundColor = randomColor()

I have verified that the function outputs random rgb values, like this "rgb(164,250, 38)"

Putting the same values the function outputs directly like this a.style.backgroundColor = "rgb(164,250, 38)" works. So I don't know how in the world putting the function doesn' work. Please help me

const gridContainer = document.querySelector(".grid-container");

let callGridDivs; // I defined this variable here because if I instead defined it inside the function below,
// I wouldn 't be able to call it in the last line due to the scope

function createGrid(num) {
  //creates divs inside div container and adds a class to each
  for (let i = 1; i <= (num * num); i++) {
    const createDiv = document.createElement("div");
    createDiv.classList.add("grid-div")
    gridContainer.appendChild(createDiv);

  }

  const gridDivs = document.querySelectorAll(".grid-div");
  callGridDivs = gridDivs; // makes gridDivs be able to be called outsize of this function, so I can
  //delete them or add event to them

  // resizes each div of the grid and arranges them into rows and columns so all divs
  //will fit in a 960px container
  gridDivs.forEach(a => a.style.height = `\"${960/num}px\"`);
  gridDivs.forEach(a => a.style.width = `\"${960/num}px\"`);
  gridContainer.style.gridTemplateRows = `repeat(${num},${100/num}%)`;
  gridContainer.style.gridTemplateColumns = `repeat(${num},${100/num}%)`;
}

//default grid
createGrid(64);
callGridDivs.forEach(a => a.addEventListener("mouseover", () => a.style.backgroundColor = "red")); // last line


//creates a button that let the user pick the grid size
const button = document.querySelector("#size");

function userCreateDivs() {
  let number = prompt("choose size below 100");
  if (number <= 100) {
    callGridDivs.forEach(a => a.remove()); //removes previous grid
    createGrid(number);
    callGridDivs.forEach(a => a.addEventListener("mouseover", () => a.style.backgroundColor = "red"));
  } else {
    alert("error, try again")
  };
}
button.addEventListener("click", userCreateDivs);

//random rgb value
function randomNumber() {
  return Math.floor(Math.random() * 256);
}

function randomColor() {

  return `"rgb(${randomNumber()},${randomNumber()}, ${randomNumber()})"`;



}



console.log(randomColor());

//random rgb button
const randomButton = document.querySelector("#random");

function rainbowGrid() {
  callGridDivs.forEach(a => a.addEventListener("mouseover", () => a.style.backgroundColor = randomColor()));
  //callGridDivs.forEach(a => a.addEventListener("mouseover",()=> a.style.backgroundColor = `"rgb(${randomNumber()},${randomNumber()}, ${randomNumber()})"`));
  //callGridDivs.forEach(a => a.addEventListener("mouseover",()=> a.style.backgroundColor = "rgb(164,250, 38)"));
  console.log(randomColor());
}
randomButton.addEventListener("click", rainbowGrid);

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(16, 6.25%);
  grid-template-rows: repeat(16, 6.25%);
  border: 1px solid red;
  height: 960px;
  width: 960px;
  gap: 0px;
}





  
  
  
  
  
  Document

javascript function randomColor() output to css backgroudColor property not working

0 Answers