0

I'm making a random background color generator, and I want the program to change the "h1" font to white when the background color is too dark (below an rgb number threshold). But my if/then statement is being ignored, and I can't figure out why. I've tried putting the statement in different parts of the code but nothing works.

const button = document.querySelector('button');
const h1 = document.querySelector('h1');

function randomColor(){
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return `rgb(${r}, ${g}, ${b})`;
}

button.addEventListener('click', function(){
    const newColor = randomColor();
    document.body.style.backgroundColor = newColor;
    h1.innerText = newColor;
    if((r + g + b) < 500){
        h1.classList.toggle("white-toggle");
    }
});

Thanks a lot.

Cody Phillips
  • 1
  • 6
    the `r`, `g` and `b` variables are only available inside `randomColor()` function, you should return an array of these values and generate `rgb()` text from it instead. – vanowm Mar 12 '22 at 22:43
  • 3
    Open the console and you'll probably see an error – GMaiolo Mar 12 '22 at 22:44

0 Answers0